寫在前面
在ng-reapet中如何為ng-model雙向綁定呢?在項目中確實遇到這樣的問題,綁定了,但是在controller中獲取不到它的值,確實挺奇怪的。
系列文章
[Angularjs]ng-select和ng-options
[Angularjs]ng-class,ng-class-even,ng-class-odd
一個例子
有這樣一個人員列表,我們希望單擊按鈕對某人的姓名進行修改,這個時候我們就需要獲取當前對象的某個屬性,代碼片段及視圖如下所示:
<!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,不知道有沒有更好的解決辦法,這是在項目中遇到的一個問題,記錄在此,希望你有個更好的解決方式,不妨留言,謝謝。