retrieve information and populate the model in the angularjs view

Question

retrieve information and populate the model in the angularjs view

$scope.orderDetails = [
        {
            "id":"115584",
            "user_id":"78937",
            "your_sys_global":null,
            "created_at":"2017-12-08 05:03:20"
        },
        {
            "id":"115585",
            "user_id":"78936",
            "your_sys_global":"MicSamse",
            "created_at":"2017-12-08 05:03:21"
        },
        {
            "id":"115586",
            "user_id":"78938",
            "your_sys_global":null,
            "created_at":"2017-12-08 05:03:52"
        }
    ];

<div ng-repeat="user in profiles track by $index">
    <input
    type="text"
    name="your_sys_global_{{user.user_id}}"
    ng-model="orderDetails[user.user_id].your_sys_global"
    ng-change="saveOrder(user, orderDetails[user.user_id])"
    >
</div>

Could you please provide assistance on why the details are not appearing in the textbox?

javascript angularjs

Answer 1

Answer №1

The issue lies with orderDetails[user.user_id]; your $scope.orderDetails is an array and requires an index to update a value within that array.

Additionally, using ng-change may not be necessary as ng-model can automatically update your $scope.orderDetails if configured correctly.

To address this, consider adding the following function to your $scope:

$scope.getUserOrder = function(user) {
  return $scope.orderDetails.filter(function(order) {
    return order.user_id === user.user_id;
  })[0];
};

Then, update your HTML markup to utilize this method:

<div ng-repeat="user in profiles track by $index">
    <input
    type="text"
    name="your_sys_global_{{user.user_id}}"
    ng-model="getUserOrder(user).your_sys_global"
    >
</div>

While there may be some minor errors, please overlook them for now.

Answer 2

The issue lies with orderDetails[user.user_id]; your $scope.orderDetails is an array and requires an index to update a value within that array.

Additionally, using ng-change may not be necessary as ng-model can automatically update your $scope.orderDetails if configured correctly.

To address this, consider adding the following function to your $scope:

$scope.getUserOrder = function(user) {
  return $scope.orderDetails.filter(function(order) {
    return order.user_id === user.user_id;
  })[0];
};

Then, update your HTML markup to utilize this method:

<div ng-repeat="user in profiles track by $index">
    <input
    type="text"
    name="your_sys_global_{{user.user_id}}"
    ng-model="getUserOrder(user).your_sys_global"
    >
</div>

While there may be some minor errors, please overlook them for now.

retrieve information and populate the model in the angularjs view

Answer №1

Similar questions

AngularJS dynamic drop-downs with filtered values appearing successively

Issues with cross-browser compatibility are arising in my jQuery code

The table is failing to update its data when I attempt to refresh it using the custom button on the page

What is a clear indication that a <div> is filled with text?

The scrolling speed of Ionic Load More feature is a bit sluggish

Utilize JavaScript or jQuery to convert XML into a string representation

A JavaScript async function that can be activated either by clicking the search button or by hitting the "enter" key in the input field

Entering destinations into the Google Maps search bar

Button activated on second click

My AngularJS ng-show functionality is not functioning as expected. I have already reviewed the syntax and still encountering issues

"Enhance performance in React by optimizing the re-render of nested functional list components

Retrieve the smallest value from an array of objects using BitGO

Positioning a Material UI Menu item underneath its parent element using CSS styling

obtain or retrieve a data file from the server

Having trouble connecting and establishing an onmousemove event?

The React Bit Dev module is showing a 404 error

What are some ways to reduce the delay of Dark mode on a website?

Exploring route grouping with angular ui-router

Is there a way to dynamically refresh the Bing web API search results on a React.js application after entering a search query in the search bar (in the SER

Sorting of dates in mui-datatables is not accurate