[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,不知道有沒有更好的解決辦法,這是在項目中遇到的一個問題,記錄在此,希望你有個更好的解決方式,不妨留言,謝謝。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM