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 prototype,executing,context,closure
Dec 24 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
asp.net刷新本页面的六种方法总结
Jan 07 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
js实现无缝轮播图特效
May 09 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php实现根据身份证获取精准年龄
2020/02/26 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
jQuery调用WebService的实现代码
2011/06/19 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
探讨JavaScript标签位置的存放与功能有无关系
2016/01/15 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
小程序实现锚点滑动效果
2019/09/23 Javascript
[08:04]TI4西雅图DOTA2前线报道 海涛探访各路人马
2014/07/09 DOTA
[03:12]完美世界DOTA2联赛PWL DAY6集锦
2020/11/05 DOTA
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
HTML5 Notification(桌面提醒)功能使用实例
2014/03/17 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
大学生实习期自我评价范文
2013/10/03 职场文书
会计专业自我鉴定范文
2013/10/06 职场文书
保洁主管岗位职责
2013/11/20 职场文书
门卫岗位安全职责
2013/12/13 职场文书
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
部分武汉产收音机展览
2022/04/07 无线电