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中的几个运算符
Jun 29 Javascript
ext checkboxgroup 回填数据解决
Aug 21 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
jQuery采用连缀写法实现的折叠菜单效果
Sep 18 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
webpack组织模块打包Library的原理及实现
Mar 10 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
node.js的http.createServer过程深入解析
Jun 06 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输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
php的一个简单加密解密代码
2014/01/14 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
自定义session存储机制避免会话保持问题
2014/10/08 PHP
PHP制作万年历
2015/01/07 PHP
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
微信小程序 引用其他js文件实现代码
2017/02/22 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
详解vue 路由跳转四种方式 (带参数)
2019/04/28 Javascript
node Buffer缓存区常见操作示例
2019/05/04 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
python编程实现希尔排序
2017/04/13 Python
Python中文编码知识点
2019/02/18 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python3创建Django项目的几种方法(3种)
2020/06/03 Python
利用python实现汉诺塔游戏
2021/03/01 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
平民服装店创业计划书
2014/01/17 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
2014年团支部工作总结
2014/11/17 职场文书
小程序自定义轮播图圆点组件
2022/06/25 Javascript