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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
Jul 13 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
js实现顶部可折叠的菜单工具栏效果实例
May 09 Javascript
javascript检测两个数组是否相似
May 19 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
JSON与XML的区别对比及案例应用
Nov 11 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 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图片缩放实现方法
2014/02/20 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
深入理解PHP中的count函数
2016/05/31 PHP
表单的一些基本用法与技巧
2006/07/15 Javascript
Hutia 的 JS 代码集
2006/10/24 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
谈谈JS中的!!
2017/12/07 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
python基于socket实现网络广播的方法
2015/04/29 Python
Google开源的Python格式化工具YAPF的安装和使用教程
2016/05/31 Python
对pandas中Series的map函数详解
2018/07/25 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
Django缓存系统实现过程解析
2019/08/02 Python
详解Python在使用JSON时需要注意的编码问题
2019/12/06 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
中层干部竞聘演讲稿
2014/05/15 职场文书
质量承诺书格式
2014/05/20 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
贪污检举信范文
2015/03/02 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
Python数据结构之队列详解
2022/03/21 Python