Angularjs实现数组随机排序的方法

 更新时间:2018年10月02日 15:55:42   作者:scvas  
今天小编就为大家分享一篇Angularjs实现数组随机排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

如下所示:

<!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实现数组随机排序的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解AngularJS中自定义过滤器

    详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等
    2015-12-12
  • AngularJS上拉加载问题解决方法

    AngularJS上拉加载问题解决方法

    这篇文章主要介绍了AngularJS上拉加载问题解决方法的相关资料,该问题在项目中一直存在,小编给大家分享解决办法,需要的朋友可以参考下
    2016-05-05
  • AngularJS模块详解及示例代码

    AngularJS模块详解及示例代码

    本文主要讲解AngularJS模块的相关知识,这里整理了详细的基础资料,并提供示例代码和示例实现效果图,有兴趣的小伙伴可以参考下
    2016-08-08
  • Augularjs-起步详解

    Augularjs-起步详解

    下面小编就为大家带来一篇Augularjs-起步详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Angular限制input框输入金额(是小数的话只保留两位小数点)

    Angular限制input框输入金额(是小数的话只保留两位小数点)

    最近做项目遇到这样的需求输入框要求输入金额,只能输入数字,可以是小数,必须保留小数点后两位。下面分为两部分代码给大家介绍实现代码,需要的的朋友参考下吧
    2017-07-07
  • AngularJS模块学习之Anchor Scroll

    AngularJS模块学习之Anchor Scroll

    这篇文章主要介绍了AngularJS模块学习之Anchor Scroll 的相关资料,需要的朋友可以参考下
    2016-01-01
  • 详解Angular CLI + Electron 开发环境搭建

    详解Angular CLI + Electron 开发环境搭建

    本篇文章主要介绍了Angular CLI + Electron 开发环境搭建,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • Angular 与 Component store实践示例

    Angular 与 Component store实践示例

    这篇文章主要为大家介绍了Angular 与 Component store实践示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • AngularJS中的按需加载ocLazyLoad示例

    AngularJS中的按需加载ocLazyLoad示例

    本篇文章主要介绍了AngularJS中的按需加载ocLazyLoad,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    AngularJS双向数据绑定原理之$watch、$apply和$digest的应用

    这篇文章主要介绍了AngularJS双向数据绑定原理之$watch、$apply和$digest的应用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-01-01

最新评论