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 相关文章推荐
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
js函数排序的实例代码
Jul 01 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
详解使用webpack构建多页面应用
Dec 21 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
js验证账户名是否重复
May 26 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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无敌近乎加密方式!
2010/07/17 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
php开发工具有哪五款
2015/11/09 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
关于js类的定义
2011/06/28 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
Jquery 切换不同图片示例代码
2013/12/05 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
Vue.js进行查询操作的实例详解
2017/08/25 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
JavaScript实现多个物体同时运动
2020/03/12 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python3处理文件中每个词的方法
2015/05/22 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
分析python切片原理和方法
2017/12/19 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python实现重建二叉树的三种方法详解
2018/06/23 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python 怎样将dataframe中的字符串日期转化为日期的方法
2019/09/26 Python
python绘制随机网络图形示例
2019/11/21 Python
大学本科毕业生求职信范文
2013/12/18 职场文书
大学生表扬信范文
2014/01/09 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
2019员工保密协议书(3篇)
2019/09/23 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技