Question

我有几个<selects>每次模块上的对象属性更改值时都会更新。当我试图记住状态时，问题出现了。我将每个更改保存到localStorage，但是当我在窗口重新加载时重新保存已保存的对象时，模型会正确更改但视图不会显示更改，除非我单击<select>，然后当所有其他应该被选中的人从模型中获得真实值时。

我可以看到，当加载因超时或事件监听器而延迟时会发生这种情况。

我该如何解决这个问题？

＆＃13;

var my_app = angular.module('campaign_listing', [])
  .controller('campaign_list_controller', campaign_list_controller);

function campaign_list_controller($http) {
  var este = this;
  this.filters = {
    categories: ["a"],
  };

  function get_save_state() {
    var items = JSON.parse(localStorage.getItem("filters"));
    return items;
  }
  this.recover_state = function() {

    var save = get_save_state();
    console.log("recovering state:")
    if (save) this.filters = save;

  }
  setTimeout(function() {
    este.recover_state();
  }, 300);
}

＆＃13;

<select 
        id="multiselect_categories" 
        name="categories" 
        ng-model="ctrl.filters.categories" 
        ng-change="ctrl.update_fields()" 
        multiple="multiple">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

＆＃13;

Answer 1

使用angular的$ timeout而不是setTimeout，这将强制一个新的摘要周期来更新UI

$timeout(function() {
    este.recover_state();
  }, 300);

如何在以角度加载数据到模型时更新视图？

1 个答案: