Javascript 如何在DOM中更改属性并保存回模型以在单独的视图中使用？

我正在创建一个小的单页Angular应用程序。我有一个主视图，其中每个项目都是可见的。我需要允许用户“收藏”一个项目，并在其他两个视图中显示该项目。用户还可以从三个视图中的任何一个视图中“取消”项目，实质上从其他两个视图中将其删除（仅显示在主视图中）

我想我可以使用复选框来更改模型，但是我说不出来，因为它没有在外部JSON中更新。我想找到一种方法将视图更改保存到模型中，然后保存模型，使其在所有视图中都保持不变

以下是标记：

<label><input type="checkbox" ng-model="item.isFavorited"></input></label>

---

我看过$watch、ng变化、服务、指令等。我认为我误解了Angular的一个基本部分。你有没有想过如何做到这一点

您的问题是由隔离作用域引起的。在主控制器内部或主控制器旁边创建新控制器时，每个控制器都有自己的作用域。子作用域可以看到其父作用域，但它处于只读模式

你的问题有两个解决方案。您可以使用rootScope存储项，并在rootScope中添加函数来编辑此数组。这是一个糟糕的设计

做你想做的事情的真正方法是使用服务。服务由所有控制器共享，甚至在视图之间保持。该服务将保存数据，并允许您通过方法访问数据

此服务将完成以下工作：

var app = angular.module('plunker', []);

app.factory('FavoritesService', function() {
  var items = [{
        "isFavorited": false,
        "name": "Ford Taurus",
        "vendor": "Hertz",
        "id" : 1
    }, 
    {
        "isFavorited": false,
        "name": "Honda Civic",
        "vendor": "Hertz",
        "id" : 2
    },
    {
        "isFavorited": false,
        "name": "Ford F150",
        "vendor": "Other",
        "id" : 3
    }];

    return {
      getItems: function() {
        return items;
      },
      addItem: function(item) {
        var currentIndex = items.length + 1;
        item.id=currentIndex;
        items.push(item);
      },
      toggleFavorite: function(id) {
        for (var i = 0; i < items.length; i++) {
          if (id == items[i].id) {
            items[i].isFavorited = !items[i].isFavorited;
            break;
          }
        }
      },
      getFavorites: function() {
        var fav = [];
        for (var i = 0; i < items.length; i++) {
          if (items[i].isFavorited) {
            fav.push(items[i]);
          }
        }
        return fav;
      }
    }
  });

最后，您可以使用如下方式对数据进行迭代：

<div ng-repeat="item in getItems()">{{item.name}} - {{item.isFavorited}}
  <button ng-click="toggleFavorite(item.id)">Toggle favorite</button>
</div>

{{item.name}-{{item.isFavorited}
切换收藏夹

我做了一个plunker，教你如何使用它。您会注意到，我在项目中添加了一个id来帮助我识别它们，但您可以不使用它。在plunker中，您可以看到3个控制器共享相同的数据。子控制器仅显示收藏夹，并允许您添加新项目。它显示了您从服务中获得的控制程度

---

祝你好运

我建议您创建一个plunker或JSFIDLE来向我们展示您的问题这似乎是一个超级可行的解决方案。我的应用程序是一个小型原型，因此我将数据合并到一个大型对象中，并将其附加到$rootScope，以便在视图之间持久保存模型更改。非常感谢您的详细回答和建议。一旦我在截止日期前完成任务，我会回过头来尝试这个解决方案。再次感谢！

$scope.getItems = function() {
  return FavoritesService.getItems();
}

$scope.toggleFavorite = function(id) {
  return FavoritesService.toggleFavorite(id);
}

<div ng-repeat="item in getItems()">{{item.name}} - {{item.isFavorited}}
  <button ng-click="toggleFavorite(item.id)">Toggle favorite</button>
</div>