带有模型绑定的嵌套 ng-repeat答案

【问题标题】：Nested ng-repeat with model binding带有模型绑定的嵌套 ng-repeat
【发布时间】：2015-07-19 13:47:55
【问题描述】：

HTML：

<div class="panel panel-default" ng-repeat="(section, sectionData) in report">
  <div class="panel-heading">{{sectionData.text}}</div>
    <div class="panel-body">
       <div class="row" ng-repeat="(part, partData) in sectionData.attr">
          <div class="col-md-2">
             <label>{{partData.text}}</label>                            
          </div>
          <div class="col-md-10">
            <div class="form-group">                        
              <div class="radio-inline" ng-repeat="condition in radioValues">
                <label class="radio-inline">
                   <input type="radio" name="{{section}}-{{part}}" ng-value="{{condition.value}}" ng-model="partData[model]">
                    {{condition.text}}
                 </label>
               </div>                                
             </div>                            
           </div>
        </div>
     </div>
 </div>

JS 模型：

$scope.radioValues = [{
    text: 'Good',
    value: '1'
}, {
    text: 'Average',
    value: '2'
}, {
    text: 'Needs Improvement',
    value: '3'
}];

$scope.report = {
card: {
    text: 'Card',
    attr: {
        front: {
            text: 'Front',
            model: 'detail.report.card.front',
        },
        rear: {
            text: 'Rear',
            model: 'detail.report.card.front.rear'
        },
        assembly: {
            text: 'Assembly',
            model: 'detail.report.card.front.assembly'
        }
    }
} //, and a lot of others like card
};

// Instantiate the model so that values are preselected
for (var section in $scope.report) {
    for (var part in $scope.report[section].attr) {
        initModel($scope.report[section].attr[part]); // basically sets the model values defined in $scope.report to 1
    }
}

$scope.report 对象用于创建 html，我正在尝试将 html 中 ng-model 的值设置为 $scope.report 中定义的字符串。除此之外，我还尝试设置每组无线电的默认值。

ng-model="partData[model]" 部分是否正确？在控制器中设置模型值后，页面加载时不会预先选择无线电。 $scope.report 中定义的模型应该直接绑定到 $scope。例如。 detail.report.card.front.assembly 实际上应该变成 $scope.detail.report...

我该如何进行这项工作？角度的使用是否正确？更好的选择？

【问题讨论】：

我也尝试过使用价值。没运气。根据我从文档中了解到的情况，如果模型的值 == 收音机中的值，则对其进行检查。

标签： javascript angularjs angularjs-ng-repeat

【解决方案1】：

我能够使用具有隔离范围的指令完成此操作。

基本上，我将 html 转换为名为 report 的模板。我稍微更改了模板 html。这是更改后的代码：

<div class="radio-inline" ng-repeat="condition in radioValues">
  <label class="radio-inline">
    <input type="radio" name="{{section}}-{{part}}" ng-value="{{condition.value}}" ng-model="detail.report[section][part]">
    {{condition.text}}
  </label>
</div>

然后像这样创建一个指令：

app.module('').directive('rating', function(){
   return {
       scope : {
          report: "=",
          detail: "=",
          radios: "="
       },
       restrict : 'E',
       templateUrl : '../view/rating.html',
       link : function($scope, iElm, iAttrs, controller) {}
   };

});

在 html 中我只是调用：

<rating report="report" radios="radios" detail="detail"></rating>

所以我可以通过将detail 对象传递给模板来访问父范围内的对象。这让我可以直接修改父作用域的模型。

【讨论】：