javascript - 动态更新和检查对象数组

Question

所以我有一个回调函数，它从 dom 返回一个数据对象(有一个项目列表，每次选择一个项目时，它都会将其作为对象返回)。这是回调函数:

$scope.fClick = function( data ) {                 
                    $scope.x = data;
                }

当您从下拉列表中选择一个项目时，从 fClick 返回的对象如下所示:{ name: "English", ticked: true }

当您从下拉列表中取消选择它时，它将返回如下内容:

{ name: "English", 勾选: false }

现在我保留一个类似于 $scope.output 的数组来维护返回对象的列表。但是，我想要做的是仅当输出中不存在具有相同属性“名称”值的对象时，将从scope.fClick 返回的对象添加到 $scope.output 。因此，现在在我的实现中， { name: "English", ticked: false } 和 { name: "English", ticked: true } 都添加到数组中。相反，我希望它更新勾选的属性。因此，例如，如果 $scope.output = { name: "English", ticked: false } ，然后scope.fClick 返回 { name: "English", ticked: true}。当我将此值推送到 $scope.output 时，我希望它更新现有对象的 tick 属性，因此 $scope.output = { name: "English", ticked: false } 变为 $ scope.output = { name: "English", 勾选: true }

这是我尝试过的:

$scope.fClick = function( data ) {                 
                    $scope.x = data;
                }
                $scope.$watch(function () {
                return $scope.y = $scope.x;
                },function (newValue, oldValue) {
                    var id = $scope.output.indexOf(newValue);
                    if(id === -1){
                        $scope.output.push(newValue);
                            }
                    else {
                        $scope.output[id].tick = newValue.tick;
                    }
                    console.log($scope.output);

            },true);

我该如何完成这项工作？

Answer 1

设置和获取Angularjs的选定值、名称和文本isteven-multi-select

<div isteven-multi-select
    input-model="marks"
    output-model="filters.marks"
    button-label="name"
    item-label="name"
    tick-property="ticked"
    selection-mode="multiple"
    helper-elements="all none filter"
    on-item-click="fClick( data )"
    default-label="Select marks"
    max-labels="1"
    max-height="250px">
</div>

添加项目

$scope.marks= [
    { name: 'Mark I', value: 'Mark i', text: 'This is Mark 1', ticked: true },
    { name: 'Mark II', value: 'Mark ii', text: 'This is Mark 2' },
    { name: 'Mark III', value: 'Mark iii', text: 'This is Mark 3' }
];

获取所选项目(更改时)

$scope.fClick = function (data) {
    console.log(data.name);
    console.log(data.value);
    console.log(data.text);
    return;
}

选择项目(动态)

$scope.abc = function (data) {
    console.log(data.element1, data.element2);

    angular.forEach($scope.marks, function (item) {
        if (item.value == data.element1) {
            item.ticked = true;
        }
        else {
            item.ticked = false;
        }
    });
}

取消选择项目

$scope.marks.map(function (item) {
    if (item.value == "")
        item.ticked = true;
    else
        item.ticked = false
});