Update and verify a collection of objects in real-time

Question

Update and verify a collection of objects in real-time

I have a callback function that retrieves a data object from the DOM. Each time an item is selected, the function returns an object like this:

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

When an item is selected from the dropdown, the object looks like this:

{  name: "English",    ticked: true    }

When the item is deselected, the object returned is:

{  name: "English",    ticked: false   }

I have an array called $scope.output to store these returned objects. What I want to achieve is to add an object to $scope.output only if there isn't already an object with the same "name" value present in the array. Currently, both

{ name: "English",    ticked: false   }

and

{   name: "English",    ticked: true    }

are added to the array. I want to update the "ticked" property instead. For example, if

$scope.output = {   name: "English",    ticked: false   }

and the function returns { name: "English", ticked: true}, I want it to update the existing object's "ticked" property:

$scope.output = {   name: "English",    ticked: true    }

This is what I have attempted:

$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);

How can I make this implementation work as intended?

javascript arrays angularjs angularjs-scope angular-filters

Answer 1

Answer №1

Access and manipulate selected values, names, and text using 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>

Adding items

$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' }
];

Obtaining selected item (on change)

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

Programmatically selecting an item

$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;
        }
    });
}

Deselecting an item

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

Answer 2

Access and manipulate selected values, names, and text using 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>

Adding items

$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' }
];

Obtaining selected item (on change)

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

Programmatically selecting an item

$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;
        }
    });
}

Deselecting an item

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

Answer 3

Answer №2

To create a simulated key/value map, you can follow these steps.

Controller

(function(){

function Controller($scope) {

  $scope.data = [
    {name: 'English', ticked: true},
    {name: 'French', ticked: false}
  ];

  //Create a key-value map
  $scope.output = {};


  $scope.update = function(index){
    //Toggle the ticked value
    $scope.data[index].ticked = !$scope.data[index].ticked;

    //Update the map value
    $scope.output[index] = $scope.data[index].ticked;
  }

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

When updating $scope.output, existing keys will be replaced with new values, otherwise new key-value pairs will be created.

HTML

  <body ng-app="app" ng-controller="ctrl">

    <ul>
      <li ng-repeat="item in data">{{item.name}} {{item.ticked}} <button type="button" ng-click="update($index)">update</button></li>
    </ul>


  </body>

Answer 4

To create a simulated key/value map, you can follow these steps.

Controller

(function(){

function Controller($scope) {

  $scope.data = [
    {name: 'English', ticked: true},
    {name: 'French', ticked: false}
  ];

  //Create a key-value map
  $scope.output = {};


  $scope.update = function(index){
    //Toggle the ticked value
    $scope.data[index].ticked = !$scope.data[index].ticked;

    //Update the map value
    $scope.output[index] = $scope.data[index].ticked;
  }

}

angular
.module('app', [])
.controller('ctrl', Controller);

})();

When updating $scope.output, existing keys will be replaced with new values, otherwise new key-value pairs will be created.

HTML

  <body ng-app="app" ng-controller="ctrl">

    <ul>
      <li ng-repeat="item in data">{{item.name}} {{item.ticked}} <button type="button" ng-click="update($index)">update</button></li>
    </ul>


  </body>

Update and verify a collection of objects in real-time

Answer №1

Answer №2

Similar questions

Attempting to generate a nested array structure in order to produce a JSON object for output

Retrieve the present value from a Selectpicker using jQuery within the Codeigniter Framework

Is it possible to simultaneously employ two asynchronous functions while handling two separate .json files?

I'm attempting to solve the retrieved data from a firebase query, but unfortunately, the data is refusing to resolve

"Upon clicking the login button, I encountered an issue with redirecting to the destination

What is the process for confirming the authenticity of lengthy passwords with bcrypt?

CSS Flexibility in Action

What are the best methods for adjusting the size of a game's

Why is my AngularJS application triggering two events with a single click?

How to Implement Multiple OR Statements in SharePoint 2010 Using Jquery and JSON Rest

Creating arrays by repeatedly assigning lists within lists

Having trouble loading script files with JSDOM in NodeJS?

How much worth does an unfilled text input box hold?

Scroll-triggered closing of modals in Next Js

Which event in the listbox should I trigger to adjust the scroll position?

Issue with JQuery delay functionality not activating correctly upon clicking an <a> tag

A guide to creating a TypeScript redux middleware class

Challenges with sorting in AngularJS

Implementing data updates in Ruby on Rails through AJAX or jQuery

"Step-by-step guide on uploading multiple images to a Node server and storing them in