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实现的分页函数
Dec 22 Javascript
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
js处理json以及字符串的比较等常用操作
Sep 08 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
详解Webpack4多页应用打包方案
Jul 16 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
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jQuery实现动态添加和删除一个div
2015/08/12 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
JS触发服务器控件的单击事件(详解)
2016/08/06 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
2017/10/14 jQuery
原生javascript实现文件异步上传的实例讲解
2017/10/26 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Python可跨平台实现获取按键的方法
2015/03/05 Python
python常见数制转换实例分析
2015/05/09 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
Python读写锁实现实现代码解析
2020/11/28 Python
python实现登录与注册系统
2020/11/30 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
土木工程专业大学毕业生求职信
2013/10/13 职场文书
办理退休介绍信
2014/01/09 职场文书
校园歌手大赛策划书
2014/01/17 职场文书
厕所文明标语
2014/06/11 职场文书
企业员工集体活动方案
2014/08/17 职场文书
社区敬老月活动总结
2015/05/07 职场文书
长江七号观后感
2015/06/11 职场文书
2015年征兵工作总结
2015/07/23 职场文书
总结python多进程multiprocessing的相关知识
2021/06/29 Python
基于Redis结合SpringBoot的秒杀案例详解
2021/10/05 Redis
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
2022/04/11 Vue.js
SQL Server中搜索特定的对象
2022/05/25 SQL Server