[Angularjs]ng-repeat中使用ng-model遇到的问题
寫在前面
在ng-reapet中如何為ng-model雙向綁定呢？在項目中確實遇到這樣的問題，綁定了，但是在controller中獲取不到它的值，確實挺奇怪的。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-show和ng-hide
[Angularjs]視圖和路由（一）
[Angularjs]視圖和路由（二）
[Angularjs]視圖和路由（三）
[Angularjs]視圖和路由（四）
[Angularjs]ng-class,ng-class-even,ng-class-odd
[Angularjs]單頁應用之分頁
[Angularjs]國際化
一個例子
有這樣一個人員列表，我們希望單擊按鈕對某人的姓名進行修改，這個時候我們就需要獲取當前對象的某個屬性，代碼片段及視圖如下所示：
<!DOCTYPE html> <html ng-app="app"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>ng-repeat和ng-model</title><meta charset="utf-8" /><script src="JS/angular.min.js"></script><script>var app = angular.module('app', []);app.controller('DetailsController', function ($scope) {$scope.pepoles = [{ 'id': 1, 'name': 'zhangsan', 'gender': '男' }, { 'id': 2, 'name': 'zhangsan2', 'gender': '男' }, { 'id': 3, 'name': 'zhangsan3', 'gender': '男' }];console.log($scope.pepoles);});</script> </head> <body><div ng-controller="DetailsController"><ul><li ng-repeat=" p in pepoles">ID:{{p.id}}<br />name:{{p.name}}<br />gender:{{p.gender}}<br /><input type="text" name="name" value="{{p.name}}" ng-model="p.name" />? <button>更改</button></li></ul></div> </body> </html>一般會這樣寫為按鈕注冊單擊事件，單擊后得到文本框綁定的屬性的新值：
<button ng-click="changeName()">更改</button>并在Controller中編寫方法的實現，以及$http請求服務進行修改數據庫。
$scope.changeName = function () {console.log($scope.name);};這樣單擊按鈕后
并不能識別name屬性。
但是可以通過另外的方法實現
<input type="text" name="name" value="{{p.name}}" ng-model="p.name" /><button ng-click="changeName(p)">更改</button> $scope.changeName = function (item) {console.log(item);};解決辦法：直接將當前對象傳到方法中或者傳屬性p.name。
網上還有另外一種解決方案，但是有個問題。
<input type="text" name="name" value="{{p.name}}" ng-model="$parent.name" />這種方式在controller中確實可以通過$scope.name拿到文本框的值，但是在視圖中，修改一個其他的也會跟著改變。
最后就出現了這樣的情況：
很明顯這并不是我們想要的結果。
總結
在ng-repeat中ng-model的問題，原因是ng-model對controller中的$scope是不可見的，所以在使用repeat中的某個對象的屬性的時候，最好還是將該對象或者該對象的值傳到方法中。剛接觸angularjs，不知道有沒有更好的解決辦法，這是在項目中遇到的一個問題，記錄在此，希望你有個更好的解決方式，不妨留言，謝謝。
總結
以上是生活随笔為你收集整理的[Angularjs]ng-repeat中使用ng-model遇到的问题的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 关于Yii2中CSS,JS文件的引入心得
- 下一篇： dl,dt,dd,ul,li,ol区别