Question

在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的引用）。

我错过了什么吗？

Answer 1

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

AngularJS：视图已正确更新，但不是模型

1 个答案: