嵌套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對象在父範圍內傳遞給模板。這使我可以直接修改父範圍的模型。