在angular中加载数据到模型时如何更新视图

How to update view when loading data to model in angular?

本文关键字：何更 新视图 模型 angular 加载 数据      更新时间：2023-09-26

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

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

我怎么能解决这个问题?

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

使用angular的$timeout而不是setTimeout，这将强制一个新的文摘循环，它将更新UI

$timeout(function() {
    este.recover_state();
  }, 300);
相关文章：