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的执行速度
Jan 23 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
javascript常用对话框小集
Sep 13 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
解决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连接函数implode与分割explode的深入解析
2013/06/26 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
jquery下拉select控件操作方法分享(jquery操作select)
2014/03/25 Javascript
js处理表格对table进行修饰
2014/05/26 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
深入学习jQuery Validate表单验证(二)
2016/01/18 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
2017/01/19 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
简单谈谈js的数据类型
2017/09/25 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
layui点击按钮页面会自动刷新的解决方案
2019/10/25 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
如何在JS文件中获取Vue组件
2020/09/16 Javascript
python迭代器的使用方法实例
2013/11/21 Python
python三元运算符实现方法
2013/12/17 Python
使用python分析git log日志示例
2014/02/27 Python
python交互式图形编程实例(一)
2017/11/17 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
python 利用zmail库发送邮件
2020/09/11 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
外企财务年会演讲稿
2014/01/03 职场文书
生日寿星公答谢词
2015/09/29 职场文书
css背景和边框标签实例详解
2021/05/21 HTML / CSS