Question

我已经尝试了很多这个问题的答案，但没有任何效果。

错误：现在，当添加的总数据项符合项目要求时，该项目将从列表中删除，但列表不会刷新视图并删除项目选择下拉列表或子列表。

我认为我的代码有一些特定的内容，所以我在这里重新创建了我的功能：

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, filterFilter) {

  Array.prototype.sum = function(prop) {
    var ptotal = 0
    for (var i = 0, _len = this.length; i < _len; i++) {
      ptotal += this[i][prop]
    }
    return ptotal
  }

  $scope.owners = [{
    "id": "1",
    "name": "parent 1"
  }, {
    "id": "2",
    "name": "parent 2"
  }];

  $scope.children = [{
    "id": "1",
    "total": "2",
    "owner": "1",
    "name": "child 1"
  }, {
    "id": "2",
    "total": "2",
    "owner": "2",
    "name": "child 2"
  }, {
    "id": "3",
    "total": "1",
    "owner": "2",
    "name": "child 3"
  }];

  var random = Math.floor(Math.random() * $scope.owners.length);
  $scope.selectedOwner = $scope.owners[random];
  $scope.childrenList = $scope.children.filter(function(x) {
    return x.owner == $scope.selectedOwner.id;
  });

  $scope.remove = function(child) {

  }

  $scope.ownerChange = function(owner) {
    $scope.selectedOwner = owner;
    $scope.childrenList = $scope.children.filter(function(x) {
      return owner.id == $scope.selectedOwner.id;
    });
  }

  $scope.data = [];

  $scope.add = function(child) {
    $scope.totalInit = filterFilter($scope.children, {
      id: child.id
    });
    var total = $scope.totalInit.sum("number");
    var complete = filterFilter($scope.data, {
      id: +child.id
    }).length;
    var number = +complete + 1;
    var input = {
      "id": child.id,
      "name": child.name,
      "number": number
    };
    if (+number >= +child.total) {
      $scope.children = $scope.children.filter(function(x) {
        return x.id != child.id;
      });
      $scope.ownerStatus = filterFilter($scope.data, {
        id: child.id
      }).length;
      if ($scope.ownerStatus === 0) {
        $scope.owners = $scope.owners.filter(function(x) {
          return x.id != child.owner;
        });
      }
    }
    $scope.data.push(input);

  };



});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Test</title>
</head>

<body ng-controller="MainCtrl">
  <p><b>The bug:</b> Right now when the total data items added meets the item requirement, the item is removed from the list, but the list isn't refreshing the view with the item removed in the select dropdown or child list.</p>
  <p>---------------------------------------------------------</p>
  <b>Select Owner:</b>
  <select ng-options="o.name for o in owners track by o.id" ng-model="selectedOwner" ng-change="ownerChange(selectedOwner)">
  </select>
  <ul>
    <li ng-repeat="c in childrenList">{{c.name}}
      <button ng-click="add(c)">Add</button>
    </li>
  </ul>
  <b>Data:</b>
  <ul>
    <li ng-repeat="d in data">{{d.name}}
      <button ng-click="data.splice($index, 1)">Remove</button>
    </li>
  </ul>
</body>

</html>

＆＃13;

Answer 1

我自己就是这么想的。在$ scope更改后我需要再次调用列表过滤器来更新列表。这是更新的代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>Test</title>
</head>

<body ng-controller="MainCtrl">
  <b>Select Owner:</b>
  <select ng-options="o.name for o in owners track by o.id" ng-model="selectedOwner" ng-change="ownerChange(selectedOwner)">
  </select>
  <ul>
    <li ng-repeat="c in childrenList track by c.id">{{c.name}}
      <button ng-click="add(c)">Add</button>
    </li>
  </ul>
  <b>Data:</b>
  <ul>
    <li ng-repeat="d in data track by $index">{{d.name}}
      <button ng-click="remove(d, $index)">Remove</button>
    </li>
  </ul>
</body>

</html>

{{1}}

Angular $范围未在视图中更新

1 个答案: