AngularJS入门教程之双向绑定详解

Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
 <option value="name">Alphabetical</option>
 <option value="age">Newest</option>
</select>


<ul class="phones">
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  {{phone.name}}
  <p>{{phone.snippet}}</p>
 </li>
</ul>

function PhoneListCtrl($scope) {
 $scope.phones = [
  {"name": "Nexus S",
   "snippet": "Fast just got faster with Nexus S.",
   "age": 0},
  {"name": "Motorola XOOM",
   "snippet": "The Next, Next Generation tablet.",
   "age": 1},
  {"name": "MOTOROLA XOOM",
   "snippet": "The Next, Next Generation tablet.",
   "age": 2}
 ];

 $scope.orderProp = 'age';
}

describe('PhoneCat controllers', function() {

 describe('PhoneListCtrl', function(){
  var scope, ctrl;

  beforeEach(function() {
   scope = {},
   ctrl = new PhoneListCtrl(scope);
  });

  it('should create "phones" model with 3 phones', function() {
   expect(scope.phones.length).toBe(3);
  });

  it('should set the default value of orderProp model', function() {
   expect(scope.orderProp).toBe('age');
  });
 });
});

Chrome: Runner reset.
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
 Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)

...
  it('should be possible to control phone order via the drop down select box',
    function() {
   //let's narrow the dataset to make the test assertions shorter
   input('query').enter('tablet');

   expect(repeater('.phones li', 'Phone List').column('phone.name')).
     toEqual(["Motorola XOOM\u2122 with Wi-Fi",
          "MOTOROLA XOOM\u2122"]);

   select('orderProp').option('Alphabetical');

   expect(repeater('.phones li', 'Phone List').column('phone.name')).
     toEqual(["MOTOROLA XOOM\u2122",
          "Motorola XOOM\u2122 with Wi-Fi"]);
  });
...