Retrieving user input from an angular controller function

Question

Retrieving user input from an angular controller function

I have a $resource object in Angular that looks like this:

{
  _id: '1'
  items: [
    {_id: 'a'}, {_id: 'b'}, {_id: 'c'}
  ]
}

My goal is to create a form with a checkbox for each element in the items array. In the act() function, I want to be able to identify which elements were selected using the checkboxes.

The HTML markup for the form is as follows:

<form ng-submit="act()">
  <input type="checkbox" ng-model="item._id" ng-repeat="item in items">
  <button type="submit">Submit</button>
</form>

However, I am struggling to access the array of item ids corresponding to the checked checkboxes within the act() function in the controller.

I have attempted to retrieve the values from the FormController in the scope, but I can only get the validity state from there. I have also tried binding the checkboxes to an array in the scope using ng-model, but it always remains empty in the act() function.

javascript angularjs

Answer 1

Answer №1

To dynamically add a field named checked to each item, you can update your controller logic to access $scope.items and filter out the checked items.

<input type="checkbox" ng-model="item.checked" ng-repeat="item in items">

$scope.act = function () {
    var checkedItems = [];
    angular.forEach($scope.items, function (item) {
        if (item.checked !== undefined && item.checked) checkedItems.push(item);
    });
    console.log(checkedItems)
}

View Demo Here

Answer 2

To dynamically add a field named checked to each item, you can update your controller logic to access $scope.items and filter out the checked items.

<input type="checkbox" ng-model="item.checked" ng-repeat="item in items">

$scope.act = function () {
    var checkedItems = [];
    angular.forEach($scope.items, function (item) {
        if (item.checked !== undefined && item.checked) checkedItems.push(item);
    });
    console.log(checkedItems)
}

View Demo Here

Answer 3

Answer №2

To keep track of the checked values, you can store them in an object with the item's id as the key. Then, filter the object to only show the values that are true (checked).

For a working example, check out this JSFiddle link.

Here is the complete controller code:

function myCtrl($scope){
    $scope.selected = {};
    $scope.var = {
      _id: '1',
      items: [
        {_id: 'a'}, {_id: 'b'}, {_id: 'c'}
      ]
    };
    
    function isChecked(obj){
        var checked = [];
        for(var key in obj){
            if(obj[key])
                checked.push(key);
        }
        return checked;
    };
    
    $scope.act = function(){
        $scope.checked = isChecked($scope.selected);
    };
}

Answer 4

To keep track of the checked values, you can store them in an object with the item's id as the key. Then, filter the object to only show the values that are true (checked).

For a working example, check out this JSFiddle link.

Here is the complete controller code:

function myCtrl($scope){
    $scope.selected = {};
    $scope.var = {
      _id: '1',
      items: [
        {_id: 'a'}, {_id: 'b'}, {_id: 'c'}
      ]
    };
    
    function isChecked(obj){
        var checked = [];
        for(var key in obj){
            if(obj[key])
                checked.push(key);
        }
        return checked;
    };
    
    $scope.act = function(){
        $scope.checked = isChecked($scope.selected);
    };
}

Retrieving user input from an angular controller function

Answer №1

Answer №2

Similar questions

Capturing user inputs in PHP or AJAX

Phonegap's JavaScript canvas feature is experiencing issues

Activating Button within Featherlight Modal

Which programming language is more suitable for developing a chat website - PHP or JSP?

Develop a game timer using CreateJS

I am unable to make changes to the Text Field component in Material-UI

React Native application fails to return any values from an asynchronous operation in App function

Toggle the visibility of an element with a single button click

The issue of VueRouter malfunctioning in history mode within Wordpress

define a variable within a v-for loop

When calling canvas.getContext('2D'), the function returns a null value

Unable to render the JSON data that was retrieved from a jQuery AJAX request

The Socket.io client establishes connections with multiple servers simultaneously

Capture sound from web browser and display live audio visualization

extract element from a string with the help of jquery

Guide to setting up a TreeView with default expansion

Sending a JSON object from JSP to JavaScript using AJAX

The error encountered is related to the MongooseServerSelectionError that occurs in

Discover the size of objects in three.js

The issue with Webpack and Angular is that they are not properly packaging Bootstrap to