How can I dynamically assign ng-model with a filter for a particular object in an array?

Question

How can I dynamically assign ng-model with a filter for a particular object in an array?

Is there a recommended method for linking an input element to a specific field of an object in an array using its id?

I tried using ng-model along with the find() function from the array prototype. However, the implementation is not working properly as it only populates the input and throws an error at the beginning of page load:

Error: [ngModel:nonassign]

Snippet from AngularJS file:

$scope.myData = [{
    "id": 51,
    "state": "A"
  },
  {
    "id": 52,
    "state": "B"
  },
  {
    "id": 53,
    "state": "C"
  },
  {
    "id": 54,
    "state": "D"
  }
];

$scope.bindObject = function(array, filterby, value, item) {
  let foundObject = array.find(obj => obj[filterby] == value);
  if (foundObject)
    return foundObject[item];
  else
    return $scope.default;
}

Code snippet from HTML file:

<input type="text" ng-model="bindObject(myData, 'id', id_value, 'state')"></input>

Note: The value for id_value is fetched via a web request;

Are there any better or more elegant approaches to achieve this functionality?

javascript angularjs

Answer 1

Answer №1

thoughts:
1. Instead of working with strings, consider working with objects by returning the object directly. This way, you don't need to worry about knowing the specific model.
2. Add a "model" property to your object for easier manipulation. 3. Implement an if statement in your code.

While not the perfect solution, this should help you make progress.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = [{
        "id": 51,
        "state": "A",
        model:"value_of_this_model"
      },
      {
        "id": 52,
        "state": "B"
      },
      {
        "id": 53,
        "state": "C"
      },
      {
        "id": 54,
        "state": "D"
      }
  ];
  $scope.bindObject = function(array, filterby, value, item) {
    let foundObject = array.find(obj => obj[filterby] == value);
    if (foundObject)
      return foundObject;
    else
      return $scope.default;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-if="bindObject(myData, 'id', 51, 'state') != default">
  {{item = bindObject(myData, 'id', 51, 'state')}}
  <input type="text" ng-model="item.model" >
</div>
</body>

Answer 2

thoughts:
1. Instead of working with strings, consider working with objects by returning the object directly. This way, you don't need to worry about knowing the specific model.
2. Add a "model" property to your object for easier manipulation. 3. Implement an if statement in your code.

While not the perfect solution, this should help you make progress.

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = [{
        "id": 51,
        "state": "A",
        model:"value_of_this_model"
      },
      {
        "id": 52,
        "state": "B"
      },
      {
        "id": 53,
        "state": "C"
      },
      {
        "id": 54,
        "state": "D"
      }
  ];
  $scope.bindObject = function(array, filterby, value, item) {
    let foundObject = array.find(obj => obj[filterby] == value);
    if (foundObject)
      return foundObject;
    else
      return $scope.default;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div ng-if="bindObject(myData, 'id', 51, 'state') != default">
  {{item = bindObject(myData, 'id', 51, 'state')}}
  <input type="text" ng-model="item.model" >
</div>
</body>

Answer 3

Answer №2

In a previous question, it was mentioned that ng-model cannot be bound to a function. Another issue I encountered was the inability to use the snippet

{{item = bindObject(myData, 'id', 51, 'state')}}

directly on my page. To work around this, I decided to convert my array into a JSON format with the id as the key:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = [
      {
        "id": 51,
        "state": "A",
      },
      {
        "id": 52,
        "state": "B"
      },
      {
        "id": 53,
        "state": "C"
      },
      {
        "id": 54,
        "state": "D"
      }
  ];
  
  let temp = {};
  for (let key in $scope.myData) {
            temp[$scope.myData[key].id] = $scope.myData[key];
                        
  } 
  $scope.myData = temp;
  console.log($scope.myData);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div>
  <input type="text" ng-model="myData[51].state" >
</div>
</body>

Answer 4

In a previous question, it was mentioned that ng-model cannot be bound to a function. Another issue I encountered was the inability to use the snippet

{{item = bindObject(myData, 'id', 51, 'state')}}

directly on my page. To work around this, I decided to convert my array into a JSON format with the id as the key:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.myData = [
      {
        "id": 51,
        "state": "A",
      },
      {
        "id": 52,
        "state": "B"
      },
      {
        "id": 53,
        "state": "C"
      },
      {
        "id": 54,
        "state": "D"
      }
  ];
  
  let temp = {};
  for (let key in $scope.myData) {
            temp[$scope.myData[key].id] = $scope.myData[key];
                        
  } 
  $scope.myData = temp;
  console.log($scope.myData);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<div>
  <input type="text" ng-model="myData[51].state" >
</div>
</body>

How can I dynamically assign ng-model with a filter for a particular object in an array?

Answer №1

Answer №2

Similar questions

Finding the text within a textarea using jQuery

The MomentJS .format() function accurately displays the date as one day in the past in my local time

Ways to patiently wait in a for loop until the ajax call is completed

Verify if the program is operating on a server or locally

Implementing Vue directives in separate files and importing them into components: A step-by-step guide

Using vue.js to pass route parameters to a component

Attaching a $UI element to a <div> tag with JQuery may result in unexpected errors and issues

FullCalendar, showcasing real-time event creation as you select dates

It appears that the collection.add() method in connector/node.js only successfully executes one time

Jquery submenu accordion toggles open and closed with each click

Storing images in MongoDB using React.js

Is there a way to transform a JavaScript array into a 'name' within the name/value pair of a JSON object?

Dual Networked Socket.IO Connection

What's the process for creating a synchronous function in AngularJS?

Fluctuating Values in Array Distribution

Hiding or removing DOM elements with ng-bootstrap pagination

"Utilizing ng class with an array of objects: A step-by-step guide

"Which is better for handling form data: using $.ajax with hidden fields or PHP form

Implementing route navigation in two components using a click button

Implement a validation function in the "jQuery validation library."