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 密码强度判断代码
Sep 05 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
简单实用的js调试logger组件实现代码
Nov 20 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
使用百度地图api实现根据地址查询经纬度
Dec 11 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
js友好的时间返回函数
Aug 24 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
Jul 05 Javascript
jquery+css实现下拉列表功能
Sep 03 jQuery
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
JQuery 常用方法基础教程
2009/02/06 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
ES6所改良的javascript“缺陷”问题
2016/08/23 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
wxpython 学习笔记 第一天
2009/02/09 Python
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
浅谈pycharm导入pandas包遇到的问题及解决
2020/06/01 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
python批量合成bilibili的m4s缓存文件为MP4格式 ver2.5
2020/12/01 Python
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
传播学毕业生求职信
2013/10/11 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
书香校园活动方案
2014/02/28 职场文书
安全宣传标语
2014/06/10 职场文书
法语专业求职信
2014/07/20 职场文书
励志演讲稿200字
2014/08/21 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python