Shulou(Shulou.com)06/03 Report--

This article is about how AngularJS implements two-way dynamic binding of radio and multi-check boxes. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

It is very simple for AngularJS to implement two-way dynamic binding in, as follows:

You only need to use ng-model to correspond to the attributes in $scope, that is, to achieve two-way dynamic binding of type= "text". The situation is slightly different at that time:

1.

Go home to school.

The two-way dynamic binding of type= "radio" is achieved by specifying the corresponding value in the selected state through the value attribute, and mapping the radio box to the attribute in $scope through ng-model.

two。

The bell vibrates the breathing lamp

The two-way dynamic binding of type= "checkbox" is realized by specifying the corresponding values of multi-checkboxes in selected and unselected states through the built-in instructions ng-true-value and ng-false-value of AngularJS, and then corresponding them to the attributes in $scope through ng-model.

However, there is always too much difference between the ideal and the reality, and there are still problems in the actual operation. It should be a problem with the scope scope in ng-repeat.

After some search and debugging, I finally solved this problem, and the effect is as follows:

Core source code

Js

Var str = ""; / / originally stored the selected item $scope.Selected = false; / / var choseArr= is not selected by default []; / / the defined array is used to store the front end display $scope.check = function (zjournal x) {console.log ("HUY:"); console.log (z); console.log ("HUYU:"); console.log (x); if (x = = false) {/ / select str = str + z +',' } else {str = str.replace (z +',','); / / uncheck} choseArr = (str.substr (0herostr.principthmur1). Split (','); console.log ("HY:"); console.log (choseArr); $scope.number_request = choseArr.length; / / Front end displays selected quantity $scope.content_request = choseArr; / / Front end displays selected request ID}

Html

1 {{item.postid}} {{item.medname}} {{item.medfact}} {{item.medcnt}} {{item.tel}} {{item.post_time}} Thank you for reading! This is the end of this article on "how to achieve two-way dynamic binding of single and multi-check boxes in AngularJS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.