У меня возникла проблема при реализации вложенного списка в Angular: представление обновляется правильно, но с другой стороны код не обновляется при изменении.
Я думаю, что код будет намного понятнее:
_this.categories = injections.map(function (category) {
return {
title: category.get('title'),
object: category,
criteria: category._criteria.map(function (oneCriteria) {
return {
object: oneCriteria,
type: oneCriteria.get("type"),
min: _this.range(oneCriteria.get("range")).min,
max: _this.range(oneCriteria.get("range")).max,
key: oneCriteria.get("key"),
value: _this.range(oneCriteria.get("range")).min,
defaultValue: _this.range(oneCriteria.get("range")).min,
selected: false
}
})
}
});
_this.category = _this.categories[0];
_this.job = {
title: '',
description: '',
salaryAmount: 0,
salaryTimeUnit: _this.salaryTimeUnits[0],
category: _this.category.object,
criteria: _this.category.criteria,
location: {latitude: 48.137004, longitude: 11.575928}
};
Итак, и очень быстро вот мой HTML:
<div ng-repeat="category in controller.categories">
<input type="radio" name="group" ng-value="category.object.get('title')" id="{{category.object.get('title')}}"
ng-checked="controller.category == category" ng-click="controller.category = category">
{{category.title}}
</div>
<br>
Criteria:
<div ng-repeat="criterium in controller.category.criteria">
<div class="row vertical-align">
<div class="col-xs-9">
<span ng-click="criterium.selected = !criterium.selected"
ng-class="['list-group-item', {active:criterium.selected == true}]">{{criterium.key}}</span>
</div>
</div>
</div>
Проблема заключается в следующем: значение обновляется в представлении (когда вы нажимаете на переключатель в категории, вы видите соответствующие критерии (критерии)). Но работа по одной причине игнорируется, но не обновляется, хотя она имеет ту же ссылку, что и HTML (ссылка на эту category.criteria
).
Я что-то пропустил?
controller.job.criteria
все еще просто ссылка на controller.categories[0]
. Ваш код должен успешно обновить категорию controller.category
чтобы указать на какую бы категорию вы нажимали, но это также не обновляет ссылку в вашей структуре данных заданий.
То, что вы хотите сделать, - сделать ваше событие ngClick
более надежным, то есть:
<input type="radio" ng-click="controller.updateCategory(category)" />
а затем в вашем js:
_this.updateCategory = function (category) {
_this.category = category;
_this.updateJob(category);
};
_this.updateJob = function (category) {
_this.job.category = category.object;
_this.job.criteria = category.criteria;
};
Это обновит ссылки в вашей работе, чтобы соответствовать новому джазу.
Однако я бы рекомендовал использовать ngModel
и ngChange
в ваших радиостанциях. Подобно:
<input type="radio" ng-model="controller.category" ng-value="category" ng-change="updateJob(category)" /> {{category.title}}