嵌套NG-重复

Question

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 ...

如何使这项工作？这是角度的正确使用吗？更好的选择？

Answer 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对象在父范围内传递给模板。这使我可以直接修改父范围的模型。