Angularjs Introductory tutorials in two-way binding detailed _angularjs

In this step you will add an attribute that allows the user to control the order in which the list of phones is displayed. Dynamic sorting can be implemented by adding a new model attribute, integrating it with the iterator, and then getting data binding to do the rest.

Please reset the working directory:

Git checkout-f step-4

You should find that in addition to the search box, you have a more than one down menu, which allows you to control the order in which the phone is arranged.

The most important differences between steps 3 and 4 are listed below. You can see the whole difference in the GitHub.

Template

App/index.html

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>

We made the following changes in the index.html:

First, we added a <select> tag called orderprop, so that our users can choose between the two sorting methods we offer.

Then, after the filter filter, add an order by filter to handle the data entering the iterator. The order by filter takes an array as input, copies a copy, and then sorts and then prints the copy back to the iterator.

Angularjs creates a two-way binding between the Select element and the Orderprop model. The Orderprop will then be used as the input to the filter by.

As we talked about data binding and iterators in step 3, whenever the data model changes (for example, the user selects a different order in the Drop-down menu), ANGULARJS data binding makes the view automatically updated. Without any clumsy DOM manipulation!

Controller

App/js/controllers.js:

function Phonelistctrl ($scope) {
 $scope. phones = [
  {' name ': ' Nexus S ',
   ' snippet ': ' Fast just got faster with N Exus S. ", Age
   : 0},
  {" name ":" Motorola xoom™with Wi-Fi ",
   " snippet ":" The next, next Generation tablet. ", 
    ' age ': 1},
  {"name": "MOTOROLA xoom™",
   "snippet": "The next, next Generation tablet.",
   "Age": 2}
 ] ;

 $scope. Orderprop = ' age ';
}

We modified the phones model--the array of phones--and added an age attribute for each cell phone. We will sort the phone according to the age attribute.

We put a line in the controller code so that the default value for Orderprop is age. If we do not set the default value, this model will remain uninitialized until our users select an order in the Drop-down menu.

Now we should talk about two-way data binding. Note that when the application is loaded in a browser, "newest" is selected in the Drop-down menu. This is because we set the Orderprop to ' age ' in the controller. So bindings work in the direction from our model to the user interface-the binding of data from model to view. Now when you select "Alphabetically" in the Drop-down menu, the data model is updated at the same time, and the array of phone listings is reordered. This is when data binding works in another direction-the binding of data from view to model.

Test

The changes we make can be validated by a unit test or an end-to-end test. Let's take a look at the unit tests first:

Test/unit/controllersspec.js:

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 ');
  });
 });
});

Unit tests now verify that the default values are set correctly.

We use the Jasmine interface to extract the Phonelistctrl controller into a beforeeach block that is shared by all the tests in the parent block describe.

Run these unit tests, as before, execute the./scripts/test.sh script, you should see the following output (note: To open http://localhost:9876 in the browser and enter strict mode, the test will not run!) ）：

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)

Now let's shift our focus to end-to-end testing.

Test/e2e/scenarios.js:

...
  It (' should is possible to control phone order via the drop down Select box ',
    function () {
   //let ' s narrow the Datas ET 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"]);
...

End-to-end testing verifies that the sorting mechanism of the option box is correct.

You can now refresh your browser and run the End-to-end test again, or you can run it on a ANGULARJS server.

Practice

In the Phonelistctrl controller, orderprop the statement, you will see that ANGULARJS will temporarily add a blank option to the Drop-down menu, and the sort order is the default sort (that is, not sorted).

Add a ' {{orderprop}} ' binding to the Index.html template to display its value in real time.

Summarize

Now you have a search function for your application, and you've tested it completely. Step 5 We will learn about ANGULARJS services and how Angularjs uses dependency injection.

The above is the ANGULARJS two-way binding data collation, follow-up continue to supplement the relevant information, thank you for your support of this site!