Question

CodePen为here

我想要商业和消费者领域的不同范围。目前它适用于两者。它应该是当用户点击消费者复选框显示输入字段，以及与业务。

<div ng-app="DataEntryApp" ng-controller="DataEntryController">
    <div>
        <labes> Products for consumers </label>
            <li ng-repeat="item in INDproducttypes">
                <span>{{ item.value}}</span>
                <input type="checkbox" ng-model="item.status" />
            </li>
            <label>--------------------------------------</label>
            </br>
            <label> Products for business </label>
            <li ng-repeat="item in INDproducttypes">
                <span>{{ item.value}}</span>
                <input type="checkbox" ng-model="item.status" />
            </li>
    </div>

    <div ng-repeat="item in INDproducttypes">
        <div ng-show="item2.status">
            <input type="text" name="name">
        </div>
    </div>
    <div ng-repeat="item in INDproducttypes">
        <div ng-show="item.status">
            <input type="text" name="name">
        </div>
    </div>
</div>

我的控制器页面

var myApp = angular.module("DataEntryApp", []);

myApp.controller("DataEntryController", function($scope) {
  $scope.INDproducttypes = [{
    "id": 1,
    "value": "Term Loans",
    "status": false
  }, {
    "id": 2,
    "value": "Lines of Credit",
    "status": false
  }, {
    "id": 3,
    "value": "Credit Card self-issued",
    "status": false
  }, {
    "id": 4,
    "value": "Mortgages",
    "status": false
  }]
});

Answer 1

TLDR：查看工作笔@ http://codepen.io/anon/pen/gwwLzE

每个ng-repeat的范围不同，但范围不是此处的问题。发生的事情是你在同一个数组上使用ng-repeat 4次，因此数组中的对象相同，这意味着你不断指向内存中的相同对象（堆）。 请阅读Stack vs Heap以及它们如何运作。

基本上，因为我们访问相同的对象数组4次，并且我们正在更新该数组中特定对象的item.status属性，这将更新所有其他ng-repeats，因为它完全相同的对象是引用。

解决方案是拥有两个数组：

一个面向消费者
一个用于商业

这可以通过以下方式实现：

$scope.consumersProductTypes = $scope.INDproducttypes;
$scope.businessProductTypes = angular.copy($scope.INDproducttypes);

现在相应地更新你的观点：

<div ng-app="DataEntryApp" ng-controller="DataEntryController">
<div>
  <labes>
  Products  for consumers </label>
  <li ng-repeat="item in consumersProductTypes">
    <span>{{ item.value}}</span>
    <input type="checkbox" ng-model ="item.status"  />
  </li>
  <label>--------------------------------------</label></br>
  <label> Products  for business </label>
  <li ng-repeat="item in businessProductTypes">
    <span>{{ item.value}}</span>
    <input type="checkbox" ng-model ="item.status"  />
  </li>
</div>
<div ng-repeat="item in consumersProductTypes">
  <div ng-show ="item.status">
    <input type="text" name="name">
  </div>
</div>
<div ng-repeat="item in businessProductTypes">
  <div ng-show ="item.status">
    <input type="text" name="name">
  </div>
</div>

查看工作笔@ http://codepen.io/anon/pen/gwwLzE

Answer 2

如果我正确理解您的问题，您只想将两个不同的列表分开，以便它们不会同步？

在这种情况下，我认为您的模型存在问题，因为它只有一个状态＆＃34;属性。您应该考虑重命名＆＃34; status＆＃34;归因于更具描述性的东西，反正的状态是什么？您可以将它们分成consumer_status和business_status，即使这并不能帮助澄清实际上它对同步问题的帮助。

如何在具有相同数据的页面中多次使用ng-repeat时区分范围

2 个答案: