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 相关文章推荐
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
JavaScript Promise启示录
Aug 12 Javascript
使用Javascript写的2048小游戏
Nov 25 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
一个域名查询的程序
2006/10/09 PHP
javascript 清除输入框中的数据
2009/04/13 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js中indexof的用法详细解析
2013/12/24 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
2019/09/11 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
Python多线程编程(八):使用Event实现线程间通信
2015/04/05 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
python实现飞船游戏的纵向移动
2020/04/24 Python
PyQt5-QDateEdit的简单使用操作
2020/07/12 Python
python实现KNN近邻算法
2020/12/30 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
医药专业应届毕业生求职信范文
2014/01/01 职场文书
领导证婚人证婚词
2014/01/13 职场文书
绘画专业自荐信范文
2014/02/23 职场文书
表决心的诗句大全
2014/03/11 职场文书
教师求职信范文
2014/05/24 职场文书
技术经济专业求职信
2014/09/03 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
慰问信格式
2015/02/14 职场文书
会议通知
2015/04/15 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书
导游词之吉林花园山
2019/10/17 职场文书
比较几种Redis集群方案
2021/06/21 Redis