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读取RSS数据
Jan 20 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JavaScript中原型和原型链详解
Feb 11 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
jQuery实现的背景颜色渐变动画效果示例
Mar 24 jQuery
微信小程序 动态传参实例详解
Apr 27 Javascript
webpack处理 css\less\sass 样式的方法
Aug 21 Javascript
微信小程序云开发如何使用npm安装依赖
May 18 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
JavaScript实现淘宝商品图切换效果
Apr 29 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
将RTF格式的文件转成HTML并在网页中显示的代码
2006/10/09 PHP
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
jquery Firefox3.5中操作select的问题
2009/07/10 Javascript
js 小数取整的函数
2010/05/10 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
2012/03/14 Javascript
jQuery 淡出一个图像到另一个图像的实现代码
2013/06/12 Javascript
JQuery中DOM事件冒泡实例分析
2015/06/13 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[06:14]《辉夜杯》外卡赛附加赛 4支战队巡礼
2015/10/23 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
python的常用模块之collections模块详解
2018/12/06 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
Python 使用office365邮箱的示例
2020/10/29 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
"火柴棍式"程序员面试题
2014/03/16 面试题
酒店秘书求职信范文
2014/02/17 职场文书
公司年底活动方案
2014/08/17 职场文书
敬业奉献模范事迹材料
2014/12/24 职场文书
职工年度考核评语
2014/12/31 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis