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 相关文章推荐
Web层改进II-用xmlhttp 无声息提交复杂表单
Jan 22 Javascript
Javascript 写的简单进度条控件
Jan 22 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
基于jQuery实现返回顶部实例代码
Jan 01 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
Vue.js样式动态绑定实现小结
Jan 24 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
Vue Router中应用中间件的方法
Aug 06 Javascript
解决vue $http的get和post请求跨域问题
Jun 07 Vue.js
解决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长字符串定义方法
2012/07/12 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
JavaScript实现的字符串replaceAll函数代码分享
2015/04/02 Javascript
javascript中的正则表达式使用详解
2015/08/30 Javascript
jQuery实现下拉框功能实例代码
2016/05/06 Javascript
第九篇Bootstrap导航菜单创建步骤详解
2016/06/21 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
2017/02/14 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Django框架models使用group by详解
2020/03/11 Python
python cookie反爬处理的实现
2020/11/01 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
九州传奇上机题
2014/07/10 面试题
自我鉴定注意事项
2014/01/19 职场文书
动漫设计与制作专业推荐信
2014/07/07 职场文书
关于国庆节的演讲稿
2014/09/05 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
沈阳故宫导游词
2015/01/31 职场文书
神龙架导游词
2015/02/11 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
学校学期工作总结
2015/08/13 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书