How to send both model value and model name to a function in an AngularJS controller

Question

How to send both model value and model name to a function in an AngularJS controller

$scope.populateMap=[{name: "ABC", code: "123"}, {name: "XYZ", code: "345"}]

//Looking to pass model name and value of the model. Currently sending ngObject.MainObj.specificFormatObj

HTML

<select ng-model="ngObject.MainObj.specificFormatObj" ng-change="ngObject.MainObj.specificFormatObj">
    <option></option>
    <option ng-repeat="i in populateMap" value="{{i}}">{{i.name}}</option>

JS

// CONTROLLER CODE JSON parse object to get name and code GOT parsedObj
$scope.genericSetLookups=function (Obj) {  // Hoping to acquire the ngmodel string along with the value, currently only value is received
    Obj.code=parsedObj.code;
    Obj.name=parsedObj.name
};

Description: ngObject.MainObj.specificFormatObj

I aim to store lookup values in a specific way within my model, including both name and code. On the UI, I populate using ng-repeat, so when selecting a value, I can use i.name for display and set the value as i.code.
If I do that, ngObject.MainObj.specificFormatObj.name will be null, and the value will be set to ngObject.MainObj.specificFormatObj.code using ng-model. Therefore, I am specifying i as the value in ng-repeat instead of i.code or i.value. Now, in the map, I have pairs of code and name.
When passing it to a function and parsing it, I set the value in ngObject.MainObj.specificFormatObj.code=inputTofunc.code, and respectively for name. In this scenario, in ng-change, I am passing ngObject.MainObj.specificFormatObj.code, but I actually want to set i from the map to ngObject.MainObj.specificFormatObj before sending it to the function, also specifying the model string which would be "ngObject.MainObj.specificFormatObj".
So, for multiple lookups, I can write generic code where I can send the model name and model value as parameters to the function. The current approach may involve hardcoding values that I wish to set in the model in a specific format.

javascript angularjs angularjs-directive angularjs-scope angular-controller

Answer 1

Answer №1

When passing the model name as a parameter, it is important to pass it as a string from html like this:

ng-change="genericSetLookups('ngObject.SomeObject.abc', ngObject.SomeObject.abc)"

Since the model name contains ".", direct usage of the name as the key in the controller is not possible. It is necessary to parse the model name. After some research, I have come up with a solution that should work.

Controller code:

$scope.genericSetLookups(modelName, value) {
    Object.setValueByString($scope, modelName, value);
}

Object.setValueByString = function(o, s, val) {
    s = s.replace(/\[(\w+)\]/g, '.$1');
    s = s.replace(/^\./, '');
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            if(i != n-1){
                o = o[k];
            } else {
                o[k] = val;
            }
        } else {
            return;
        }
    }
    return o;
}

Credit goes to @Alnitak for providing an answer here

Answer 2

When passing the model name as a parameter, it is important to pass it as a string from html like this:

ng-change="genericSetLookups('ngObject.SomeObject.abc', ngObject.SomeObject.abc)"

Since the model name contains ".", direct usage of the name as the key in the controller is not possible. It is necessary to parse the model name. After some research, I have come up with a solution that should work.

Controller code:

$scope.genericSetLookups(modelName, value) {
    Object.setValueByString($scope, modelName, value);
}

Object.setValueByString = function(o, s, val) {
    s = s.replace(/\[(\w+)\]/g, '.$1');
    s = s.replace(/^\./, '');
    var a = s.split('.');
    for (var i = 0, n = a.length; i < n; ++i) {
        var k = a[i];
        if (k in o) {
            if(i != n-1){
                o = o[k];
            } else {
                o[k] = val;
            }
        } else {
            return;
        }
    }
    return o;
}

Credit goes to @Alnitak for providing an answer here

Answer 3

Answer №2

I'm having trouble understanding your issue, and the comments didn't provide much clarity for me. To shed some light, I'll offer an example of how I typically handle a select box and the corresponding model.

In my approach, I iterate through the options using ng-options and display the selected option by inserting {{selected.name}} in the template. If you need to format the selected value or respond to changes, you can utilize ng-change.

Hopefully this explanation is useful to you.

You can view my JSFiddle here

Answer 4

I'm having trouble understanding your issue, and the comments didn't provide much clarity for me. To shed some light, I'll offer an example of how I typically handle a select box and the corresponding model.

In my approach, I iterate through the options using ng-options and display the selected option by inserting {{selected.name}} in the template. If you need to format the selected value or respond to changes, you can utilize ng-change.

Hopefully this explanation is useful to you.

You can view my JSFiddle here

Answer 5

Answer №3

I'm not exactly clear on what you're asking. If you're looking to store the code and name together in your model, this snippet of code might be helpful:

 <select ng-model="ngObject.MainObj.specificFormatObj" ng-options="(ppm.code + '-' + ppm.name) as ppm.name for ppm in populateMap">
 </select>

Check out this jsfiddle example

Answer 6

I'm not exactly clear on what you're asking. If you're looking to store the code and name together in your model, this snippet of code might be helpful:

 <select ng-model="ngObject.MainObj.specificFormatObj" ng-options="(ppm.code + '-' + ppm.name) as ppm.name for ppm in populateMap">
 </select>

Check out this jsfiddle example

How to send both model value and model name to a function in an AngularJS controller

Answer №1

Answer №2

Answer №3

Similar questions

Sending Uint8Array buffer without any null bytes

Incorporate AngularJS into jQuery plugins for enhanced functionality

Trouble arises when attempting to use JavaScript, JSP, and JSON in conjunction with

Accumulating a result from elements.all.each in the latest version (4.0.1) of the protractor framework

Is there a method available to define a custom auto-generated key when inserting an object into Firebase Realtime Database?

I'm struggling to comprehend the purpose of this function. [From the Codecademy Contact List exercise]

Easy-peasy AJAX bookmarking

Is it necessary to "debug" in JavaScript?

Instructions on how to ensure that an AJAX call will only function when the user is logged in within a Rails application

What is the best way to confirm if an element has focus?

invoke a function through a form in Angular

How can I turn off the ToggleButton?

What are the benefits of keeping synchronous state in the Redux store?

The Forward and Back Buttons respond based on the current position of the caret

Executing usemin and useminPrepare on various targets is made possible by Grunt

What is the best way to replace a regular expression in JavaScript?

What is the best way to properly format the retrieved JSON string using Ext JS?

Node.js: Error - Module 'html' not found

Generating personalized MongoDB collections for individual users - A step-by-step guide

Having issues with the background-image style not displaying correctly in the header of an