How to Use angularjs to create a complete table 3 _ use ng-model and angularjsng-repeat in ng-repeat
When ng-model is used in ng-repeat, many questions are asked. Some people cannot obtain the bound data content, some people change the bound data content together with all the cyclically generated content. I have also encountered the above problems during development, but I cannot solve the problem. I have to briefly introduce how to solve the problem that cannot be obtained.
For example:
Html:
<Body> <div ng-controller = "selectController"> <div ng-repeat = "pop in citylist"> <select ng-model = "p"> <option value =" "style =" display: none; "> {pop. pop }}</option> <option value = "Beijing"> Beijing </option> <option value = "Shanghai"> Shanghai </option> <option value = "Guangzhou"> Guangzhou </option> </select> <button ng-click = "cs () "> ceshi </button> </div> </body>
Js:
<Script> var app = angular. module ('app', []); app. controller ('selectcontroller', function ($ scope) {$ scope. citylist = [{id: 1, pop: "Beijing" },{ id: 1, pop: "Shanghai" },{ id: 1, pop: "Guangzhou"}]; $ scope. cs = function () {console. log ($ scope. p) ;}}) </script>
This is a simple function. You want to obtain the selected data content of the select statement when you click the change button, but you will find that only undefined can be obtained in this way, at this time, some people will propose that p can be assigned to an object, and the key: value method is used to save each selection.
$scope.p={};
There is indeed no problem, but there is a new problem that as long as one item is changed, all the content will change together. Is there any better way?
Just a small change
Html:
<button ng-click="cs(p)">ceshi</button>
Js:
$scope.cs=function(p){ console.log(p); }
This is just a simple example. If you have any other questions during actual use, you can leave a comment.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
