如何在没有拼接的情况下更新数组（angularjs）元素？

Question

我在这篇帖子here 中遇到了类似的情况，只是我不仅需要获取元素，还需要更改它，例如名称值。

我已经发现可以这样做：

dataList.splice(index, 1);
dataList.splice(index, 0, newItem);

但是有几个问题。我知道 id 但如果我不时操作数组，我将失去对索引 id 相关性的跟踪，因为使用这种方法我会取出项目，更改它们并将它们作为“新”推送，对?但这有点不太优雅，我认为可能会导致问题。

基本上我只想切换一个可见的属性，然后应该在数组中更改。这是数组：

$scope.cLines = [{ id: 1, cColor: 'red', cName: 'Entryline right', visible: true }];

当然里面通常有更多的元素，但为了简单起见，我留下了一个。

可见的切换器应该是这样工作的（天真的“伪代码”，如果它能像那样简单地工作，那就太棒了:)）

$scope.cLines[id === id].visible = !$scope.cLines[id === id].visible;

如果我可以直接使用过滤器访问元素，那么第二好的事情是，这可能吗？

提前谢谢你。

Answer 1

有几种方法可以解决这个问题。一种是使用filter()。

var id = 1;
var visibility = true;

var items = $scope.cLines.filter(function(item) {
    return item.id === id;
});
if (items.length >= 1) items[0].visible = visibility;

你可以把它包装成一个函数：

function setVisibility(arr, id, visibility) {
    var items = arr.filter(function(item) {
        return item.id === id;
    });
    if (items.length >= 1) items[0].visible = visibility;
}

然后像这样使用它：

setVisibility($scope.cLines, 1, true);

您还可以将$scope.cLines 更新为更复杂的对象，而不仅仅是一个数组：

$scope.cLines = {
    "item" : function (id) {
        var items = this.lines.filter(function(item) {
            return item.id === id;
        });
        if (items.length >= 1) 
            return items[0];
        else
            return new Object(); //or throw an error
    },
    "lines" : [
        { id: 1, cColor: 'red', cName: 'Entryline right', visible: true }
        //....and more
    ]
};

然后像这样使用它：

$scope.cLines.item(1).visible = true;

有了这个，如果你必须循环访问它，请确保使用$scope.cLines.lines。

Answer 2

我不确定我是否完全理解了这个问题，所以如果我离开这里，也许你可以澄清你想要做什么。

如果您有一个 ng-repeat 并且您试图切换当前对象中的某个值，只需将该对象传递给 ng-click 函数：

<button ng-click="changeVisible(line);" ng-repeat="line in cLines">Visible = {{line.visible}}</button>

然后在你的控制器中，你会有这样的东西：

$scope.changeVisible = function(obj) {
    obj.visible = !obj.visible;
  }

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

app.controller('DemoCtrl', function($scope) {
  $scope.cLines = [{
    id: 1,
    cColor: 'red',
    cName: 'Entryline right',
    visible: true
  }, {
    id: 2,
    cColor: 'blue',
    cName: 'Entryline right',
    visible: false
  }];

  $scope.changeVisible = function(obj) {
    obj.visible = !obj.visible;
  }

});

<script src="https://code.angularjs.org/1.3.16/angular.js"></script>
<div ng-app="demo">
  <div ng-controller="DemoCtrl">
    <button ng-click="changeVisible(line);" ng-repeat="line in cLines">Visible = {{line.visible}}</button>
  </div>
</div>