AngularJs ng-repeat中使用ng-model

本文轉載自查看原文 2018-01-24 16:47 1877 AngularJs

在ng-repeat中使用ng-model的時候發現數據並沒有綁定成功，原因是ng-repeat之間的代碼，對全局的$scope里變量的內容是不可見的，也就是說ng-repeat之間的代碼和變量是在子$scope中的，所以如果想要引用全局$scope里的成員，可以使用$parent 來引用全局的$scope。

引用：http://zhaoyanblog.com/archives/97.html

這里舉兩個比較典型的例子：

1. 在RadioButton中使用ng-repeat和ng-model，綁定的是同一個變量。假設需求是這樣的：有3個不同顏色的單選按鈕，選擇一個顏色之后點擊保存按鈕向后台發送一個這種格式的數據：{colorId: 0}

<body ng-controller="ctrl">

<div ng-repeat="color in colorList">
    <input type="radio" value="{{ color.id }}" name="radio" ng-model="$parent.colorId">
    <label>{{ color.name }}</label>
</div>

<input type="button" ng-click="save(colorId)" value=" SAVE ">

<script>
    var app = angular.module('myApp', []);
    app.controller('ctrl', function ($scope) {
        $scope.colorList = [{name: "orange", id: 1}, {name: "red", id: 2}, {name: "blue", id: 3}];
        $scope.save = function (colorId) {
            var data = {"colorId": parseInt(colorId)};
            console.log(data);
        }
    });
</script>
</body>

控制台輸出結果： {colorId: 3}

2. 在Checkbox中使用ng-repeat和ng-model，每個復選框分別綁定一個變量。並且假設頁面上顯示的復選框的名字和向后台發送的變量名字不一樣。

<body ng-controller="ctrl">

<div ng-repeat="day in dayList">
    <input type="checkbox" name="radio" ng-model="$parent.appointment[day.modelName]">
    <label>{{ day.displayName }}</label>
</div>

<input type="button" ng-click="save()" value=" SAVE ">

<script>
    var app = angular.module('myApp', []);
    app.controller('ctrl', function ($scope) {
        $scope.appointment = {
            "Sun": false,
            "Mon": false,
            "Tue": false,
            "Wed": false,
            "Thu": false,
            "Fri": false,
            "Sat": false
        };
        $scope.dayList = [{
            modelName  : "Sun",
            displayName: "U"
        }, {
            modelName  : "Mon",
            displayName: "M"
        }, {
            modelName  : "Tue",
            displayName: "T"
        }, {
            modelName  : "Wed",
            displayName: "W"
        }, {
            modelName  : "Thu",
            displayName: "R"
        }, {
            modelName  : "Fri",
            displayName: "F"
        }, {
            modelName  : "Sat",
            displayName: "S"
        }];
        $scope.save = function () {
            console.log($scope.appointment);
        }
    });
</script>
</body>

控制台輸出結果： {Sun: true, Mon: true, Tue: true, Wed: false, Thu: false, Tue: true, Wed: false}

免責聲明！

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

猜您在找 [Angularjs]ng-repeat中使用ng-model遇到的問題如何用angularjs制作一個完整的表格之三__在ng-repeat中使用ng-model AngularJS 獲取ng-repeat的動態ng-model angularjs中ng-repeat的使用 angularjs ng-repeat倒敘 AngularJs 使用ng-repeat 時，去除重復項 AngularJS：如何使用自定義指令來取代ng-repeat AngularJS ng-repeat使用及注意事項使用angularJs ng-repeat做表格合並行效果 AngularJs ng-repeat限制循環次數