angularJs利用$scope处理升降序的方法

如下所示：

<div ng-app="module" ng-controller="ctrl">
 <table border="1" width="600">
  <tr>
   <td ng-click="orderBy('id')">编号
    <span ng-if="status.id">升序</span>
    <span ng-if="!status.id">降序</span>
   </td>
   <td ng-click="orderBy('click')">点击数
    <span ng-if="status.click">升序</span>
    <span ng-if="!status.click">降序</span>
   </td>
   <td ng-click="orderBy('title')">标题
    <span ng-if="status.title">升序</span>
    <span ng-if="!status.title">降序</span>
   </td>
  </tr>
  <tr ng-repeat="(k,v) in data">
   <td>{{v.id}}</td>
   <td>{{v.click}}</td>
   <td>{{v.title}}</td>
  </tr>
 </table>
</div>
<script>
 var m = angular.module('module', []);
 m.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {
  $scope.data = [
   {id: 1, click: 100, title: '百度'},
   {id: 2, click: 200, title: '谷歌'},
   {id: 3, click: 300, title: '腾讯'},
  ];
  //记录排序的状态
  $scope.status = {id: false, click: false, title: false};
  $scope.orderBy = function (field) {
   /*切换升序和降序*/
   $scope.status[field]=!$scope.status[field];
   $scope.data = $filter('orderBy')($scope.data, field, $scope.status[field]);
  }
 }]);
</script>

效果图：

以上这篇angularJs利用$scope处理升降序的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • angularJs中$scope数据序列化的实例

    如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <script src="jquery.min.js"></script> </head> <bod

  • angularJS 中$scope方法使用指南

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

  • 深入理解Angular.JS中的Scope继承

    深入理解Angular.JS中的Scope继承

    前言 AngularJS中scope之间的继承关系使用JavaScript的原型继承方式实现.本文结合AngularJS Scope的实现以及相关资料谈谈原型继承机制.下面来看看详细的介绍: 基本原理 在JavaScript中,每创建一个构造函数(constructor),就会同时给该函数生成一个指向原型对象的属性prototype.每个原型对象又获得一个constructor属性指向相应的构造函数,原型对象的其他属性和方法从Object继承而来.每个通过构造函数创建的实例,都包含一个指向构造函

  • 深入探究AngularJs之$scope对象（作用域）

    深入探究AngularJs之$scope对象（作用域）

    这两天学习了AngularJs之$scope对象这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染. 每个$scope都是Scope类的实例,Scope类有很多方法,用于控制作用域的生命周期.提供事件传播功能,以及支持模板的渲染等. AngularJs的每个应用程序都有一个$rootScope,它是其他所有作用域的父作用域,它的作用范围从包含ng-app指令的H

  • angularJs利用$scope处理升降序的方法

    如下所示: <div ng-app="module" ng-controller="ctrl"> <table border="1" width="600"> <tr> <td ng-click="orderBy('id')">编号 <span ng-if="status.id">升序</span> <span

  • jQuery实现条件搜索查询、实时取值及升降序排序的方法分析

    本文实例讲述了jQuery实现条件搜索查询.实时取值及升降序排序的方法.分享给大家供大家参考,具体如下: 一.鼠标点击获取搜索条件中的被选中的值 创建方法  getAttrValue() 方法,每次的 .click 都要调用  function  getAttrValue(){} 例如,把选中的值给到属性 data-value .只需要每次点击,获取 li.active 的子集  a 的 .attr("data-value")即可 eg: var pubTime = $(getArr[

  • AngularJS实现使用路由切换视图的方法

    本文实例讲述了AngularJS实现使用路由切换视图的方法.分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例. 注意:除了引用angular.js之外,还要引用angular-route.js. 1.创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都放在里面,例如菜单.在这个例子中,我们仅仅把应用的标题放在里面,然后再用ng-view指令来告诉Angular把视图显示在哪儿. <!DOCTYPE html> <html xml

  • AngularJS中scope的绑定策略实例分析

    本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以

  • 深入理解AngularJs－scope的脏检查（一）

    进入正文前的说明:本文中的示例代码并非AngularJs源码,而是来自书籍<<Build Your Own AngularJs>>, 这本书的作者仅依赖jquery和lodash一步一步构建出AngularJs的各核心模块,对全面理解AngularJs有非常巨大的帮助.若有正在使用AngulaJs攻城拔寨并且希望完全掌握手中武器的小伙伴,相信能对你理解AngularJs带来莫大帮助,感谢作者. 在这篇文章中,希望能让您理清楚以下几项与scope相关的功能: 1.dirty-chec

  • AngularJS控制器controller正确的通信的方法

    AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope. 每个$scope的$root指向$ro

  • AngularJS读取JSON及XML文件的方法示例

    本文实例讲述了AngularJS读取JSON及XML文件的方法.分享给大家供大家参考,具体如下: <!doctype html> <meta charset="UTF-8"> <html ng-app='routingDemoApp'> <head> <title>AJAX and promise</title> <link href="bootstrap.min.css" rel=&qu

  • AngularJS全局scope与Isolate scope通信用法示例

    本文实例讲述了AngularJS全局scope与Isolate scope通信用法.分享给大家供大家参考,具体如下: 在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在dire

  • AngularJS自定义指令之复制指令实现方法

    本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c

随机推荐