ホームページ > 記事 > ウェブフロントエンド > ng-repeat_AngularJS で ng-model を使用するときに angularjs で発生する問題
ng-repeat_AngularJS で ng-model を使用するときに angularjs で発生する問題
- WBOYオリジナル
- 2016-05-16 15:19:051226ブラウズ
ng-repeat で ng-model を使用すると、バインドされたデータのコンテンツを取得できないという問題が発生したり、バインドされたデータのコンテンツが変更されるとループによって生成されたすべてのコンテンツが変更されてしまうという問題が発生することがあります。一緒に。 。私も開発中に上記の問題に遭遇しましたが、解決した後も復旧できなかったので、取得できない状況の解決方法を簡単に紹介します。
例:
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="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<button ng-click="cs()">ceshi</button>
</div>
</div>
</body>
js:
<script>
var app = angular.module('app', []);
app.controller('selectController', function ($scope) {
$scope.citylist=[{id:1,pop:"北京"},{id:1,pop:"上海"},{id:1,pop:"广州"}];
$scope.cs=function(){
console.log($scope.p);
}
})
</script>
変更ボタンをクリックしたときにselectの現在選択されているデータ内容を取得したいという非常に単純な関数ですが、このように書くと未定義しか取得できないことがわかります。 Key:value メソッドを使用して各選択を保存し、p をオブジェクトに割り当てることができることを提案します
$scope.p={};
これは確かに問題ありませんが、新たな問題が発生します。つまり、1 つの項目を変更すると、すべての内容が一緒に変更されてしまうということです。もっと良い方法はあるでしょうか?
ちょっとした変化
html:
<button ng-click="cs(p)">ceshi</button>
js:
$scope.cs=function(p){
console.log(p);
}
これは単なる例です。実際の使用中に他の問題が見つかった場合は、コメントにメッセージを残してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。