Question

当选中复选框时，我无法在ng-model中获取值。

config.previewData[0] = {"Country":"Hong Kong","Level":0,"TonerQty":23166}

我的HTML代码如

<div ng-repeat="(key, val) in config.previewData[0]">

    <label class="checkbox" for="{{$index}}">
        <input type="checkbox" ng-model="config.Selectedkey[$index]" name="group" id="{{$index}}" />
        {{key}}
    </label>
</div>

但在config.Selectedkey[$index]中，当我点击复选框时，没有任何内容可以绑定。

Answer 1

基本上，当你使用ng-repeat时，它会在重复中创建自己的范围。因此，当您想要访问父范围/使用重复内部的模型时，您需要使用控制器作为语法/使用$ parent。

我将其更改为使用ControllerAs语法并开始工作。

有关ng-repeat

的更多信息

＆＃13;

var app = angular.module('sampleApp', []);

app.controller('MainCtrl', function($scope) {
  $scope.previewData = [{
    "Country": "Australia",
    "TonerQty": 4,
    "TonerQty1": 720
  }, {
    "Country": "Australia",
    "TonerQty": 1,
    "TonerQty1": 20839
  }, {
    "Country": "Australia",
    "TonerQty": 3,
    "TonerQty1": 639
  }, {
    "Country": "Australia",
    "TonerQty": 12,
    "TonerQty1": 36
  }, {
    "Country": "Australia",
    "TonerQty": 0,
    "TonerQty1": 0
  }, {
    "Country": "Australia",
    "TonerQty": 6,
    "TonerQty1": 396
  }, {
    "Country": "Australia",
    "TonerQty": 8,
    "TonerQty1": 24
  }, {
    "Country": "Australia",
    "TonerQty": 5,
    "TonerQty1": 495
  }, {
    "Country": "Australia",
    "TonerQty": 10,
    "TonerQty1": 180
  }, {
    "Country": "Australia",
    "TonerQty": 2,
    "TonerQty1": 1452
  }];

});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="MainCtrl as mc">
    <div ng-repeat="(key, val) in previewData[0]">

      <label class="checkbox" for="{{$index}}">
        <input type="checkbox" ng-model="mc.Selectedkey[$index]" name="group" id="{{$index}}" />{{key}}
      </label>
    </div>
    {{mc.Selectedkey}}
  </div>
</div>

＆＃13;

Answer 2

请将您的JSON修改为

config.previewData[0] = {"Country":"Hong Kong",
                         "Level":0,
                         "TonerQty":23166, 
                         "Selectedkey": false}

您的JSON数据不包含名为Selectedkey的密钥，这就是您无法读取模型值的原因。

同时将模板替换为

<div ng-repeat="(key, val) in config.previewData">
    <label class="checkbox" for="{{$index}}">
        <input type="checkbox" ng-model="config.Selectedkey[$index]" name="group" id="{{$index}}" />
        {{key}}
    </label>
</div>

因为你循环遍历config.previewData而不是config.previewData [0]

请查看附带的示例代码。

＆＃13;

<!DOCTYPE html>
<html ng-app="TestApp">

<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
    <script>
        var myApp = angular.module('TestApp', []);

        myApp.controller('TestAppCtrl', ['$scope', function ($scope) {

            $scope.previewData = '[{"Country":"Australia","TonerQty":4,"TonerQty1":720,"Selectedkey":false},{"Country":"Australia","TonerQty":1,"TonerQty1":20839,"Selectedkey":false},{"Country":"Australia","TonerQty":3,"TonerQty1":639,"Selectedkey":false},{"Country":"Australia","TonerQty":12,"TonerQty1":36,"Selectedkey":false},{"Country":"Australia","TonerQty":0,"TonerQty1":0,"Selectedkey":false},{"Country":"Australia","TonerQty":6,"TonerQty1":396,"Selectedkey":false},{"Country":"Australia","TonerQty":8,"TonerQty1":24,"Selectedkey":false},{"Country":"Australia","TonerQty":5,"TonerQty1":495,"Selectedkey":false},{"Country":"Australia","TonerQty":10,"TonerQty1":180,"Selectedkey":false},{"Country":"Australia","TonerQty":2,"TonerQty1":1452,"Selectedkey":false}]';

            $scope.previewData = JSON.parse($scope.previewData);
        }]);
    </script>

</head>

<body ng-controller="TestAppCtrl">
    <div ng-repeat="(key, val) in previewData">

        <label class="checkbox" for="{{$index}}">
            <input type="checkbox" ng-model="Selectedkey" name="group" id="{{$index}}" /> {{key}} - {{Selectedkey}}
        </label>
    </div>
</body>

</html>

＆＃13;

通过ng-repeat在ng-model中绑定值

2 个答案: