AngularJS教程：实现双向数据绑定与列表排序功能-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00245/article/details/148324286

AngularJS教程：实现双向数据绑定与列表排序功能

angular.js angular/angular.js: 是 Google 推出的一款 JavaScript 框架，可以方便地实现 Web 应用程序的前端开发。适合对 JavaScript、Web 应用程序和想要实现 Web 应用程序前端开发的开发者。项目地址: https://gitcode.com/gh_mirrors/an/angular.js

前言

在AngularJS开发中，双向数据绑定是其最强大的特性之一。本文将深入讲解如何在AngularJS应用中实现双向数据绑定，并通过一个手机列表排序的实例来展示这一特性的实际应用。

双向数据绑定概念

双向数据绑定是AngularJS的核心特性，它意味着：

当模型数据发生变化时，视图会自动更新
当用户通过视图修改数据时，模型也会相应更新

这种机制大大简化了开发流程，开发者无需手动编写DOM操作代码。

实现步骤详解

1. 修改模板文件

首先，我们需要在手机列表模板中添加排序功能：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <p>
        Search:
        <input ng-model="$ctrl.query">
      </p>
      <p>
        Sort by:
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>
    </div>
    <div class="col-md-10">
      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
          <span>{{phone.name}}</span>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>
    </div>
  </div>
</div>

关键点说明：

添加了<select>元素，使用ng-model绑定到控制器的orderProp属性
在ng-repeat指令中，将orderBy过滤器与filter过滤器串联使用
orderBy过滤器会根据指定的属性对数组进行排序

2. 更新控制器

接下来，我们需要修改控制器代码：

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController() {
      this.phones = [
        {
          name: 'Nexus S',
          snippet: 'Fast just got faster with Nexus S.',
          age: 1
        }, {
          name: 'Motorola XOOM™ with Wi-Fi',
          snippet: 'The Next, Next Generation tablet.',
          age: 2
        }, {
          name: 'MOTOROLA XOOM™',
          snippet: 'The Next, Next Generation tablet.',
          age: 3
        }
      ];
      this.orderProp = 'age';
    }
  });

关键修改：

为每个手机对象添加了age属性，用于按新旧程度排序
设置了默认排序属性orderProp为'age'，确保页面加载时按新旧排序

双向数据绑定工作原理

模型到视图的绑定：当页面加载时，控制器中的orderProp值为'age'，因此下拉菜单自动选择"Newest"选项
视图到模型的绑定：当用户在下拉菜单中选择"Alphabetical"时，orderProp值会自动更新为'name'
自动更新：orderProp值的变化会触发orderBy过滤器重新排序列表，视图自动更新

测试验证

单元测试

describe('phoneList', function() {
  beforeEach(module('phoneList'));
  
  describe('PhoneListController', function() {
    var ctrl;
    
    beforeEach(inject(function($componentController) {
      ctrl = $componentController('phoneList');
    }));
    
    it('should create a `phones` model with 3 phones', function() {
      expect(ctrl.phones.length).toBe(3);
    });
    
    it('should set a default value for the `orderProp` model', function() {
      expect(ctrl.orderProp).toBe('age');
    });
  });
});

测试要点：

验证控制器是否正确初始化了phones数组
确保默认排序属性设置正确

端到端测试

describe('PhoneCat Application', function() {
  describe('phoneList', function() {
    it('should be possible to control phone order via the drop-down menu', function() {
      // 测试代码省略...
    });
  });
});

端到端测试验证了：