Angularjs实现数组随机排序的方法


Posted in Javascript onOctober 02, 2018

如下所示:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>实现数组随机排序</title>
  //需要导入angular.js库文件
  <script type="text/javascript" src="../angular-1.5.5/angular-1.5.5/angular.js"></script>
  <script type="text/javascript">
   var app = angular.module("myApp", []);
   var arr1 = [1, 2, 3, 7, 4, 9, 5, 6];
   app.service("sortService", function() {
    this.arr = [1, 2, 3, 7, 4, 9, 5, 6];
    this.t;
    this.mySort = function() {
     //alert("haha");
     for(var i = 0; i < this.arr.length; i++) {
      var rand = parseInt(Math.random() * this.arr.length);
      this.t = this.arr[rand];
      this.arr[rand] = this.arr[i];
      this.arr[i] = this.t;
     }
    }
   })
   app.controller("myCtrl", function($scope, sortService) {
    $scope.arr = arr1;
    $scope.newArr = sortService.arr;
    $scope.mySort2 = sortService.mySort;
    
    /*$scope.mySort2 = function(){
     sortService.mySort();
    }*/
   })
  </script>
 </head>
 <body ng-app="myApp" ng-controller="myCtrl">
  {{newArr}}<br><button ng-click="mySort2()">点击随机排序</button> <br>{{arr}}
  <!--{{arr}}<button ng-click="mySort2()">点击随机排序</button> {{newArr}}-->
 </body>
</html>

Angularjs实现数组随机排序的方法

以上这篇Angularjs实现数组随机排序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript入门教程(12) js对象化编程
Jan 31 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
js中cookie的添加、取值、删除示例代码
Oct 21 Javascript
JsRender for object语法简介
Oct 31 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
servlet+jquery实现文件上传进度条示例代码
Jan 25 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 #Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 #Javascript
angular ng-model 无法获取值的处理方法
Oct 02 #Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 #Javascript
angularjs使用div模拟textarea文本框的方法
Oct 02 #Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 #Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 #Javascript
You might like
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
php之可变变量的实例详解
2017/09/12 PHP
php报错502badgateway解决方法
2019/10/11 PHP
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
js实现简单的验证码
2015/12/25 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
Vue中this.$router.push参数获取方法
2018/02/27 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
JS删除数组指定值常用方法详解
2020/06/04 Javascript
python使用arp欺骗伪造网关的方法
2015/04/24 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python中的if、else、elif语句用法简明讲解
2016/03/11 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
Python给定一个句子倒序输出单词以及字母的方法
2018/12/20 Python
将python包发布到PyPI和制作whl文件方式
2019/12/25 Python
python实现邮件循环自动发件功能
2020/09/11 Python
python 实现性别识别
2020/11/21 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
全球立体声:World Wide Stereo
2018/09/29 全球购物
2014年计划生育协会工作总结
2014/11/14 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
初二数学教学反思
2016/02/17 职场文书
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
最新最全的手机号验证正则表达式
2022/02/24 Javascript