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, и я пытаюсь установить значение ng-модели в html для строк, определенных в $ scope.report. Наряду с этим, я также пытаюсь установить значения по умолчанию для каждого набора радиостанций.
Правильна ли часть ng-model = "partData [model]"? После установки значений модели в контроллере радиоприемники не предварительно выбираются при загрузке страницы. Модель, определенная в $ scope.report, должна напрямую связываться с $ scope. Например, detail.report.card.front.assembly должен фактически стать $ scope.detail.report...
Как это сделать? Правильное использование углового? Лучшие альтернативы?
Мне удалось это сделать, используя директиву с изолированной областью.
В основном, я переместил 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
объекту в родительской области, передав его в шаблон. Это позволило мне напрямую изменить модель родительского объекта.