Can a ng_model reference be passed to a function within an angularjs environment?

Question

Can a ng_model reference be passed to a function within an angularjs environment?

Instead of writing the same function 6 times for different relationships between a select box and an input field, I want to pass the ng_model reference of the input to the ng-Change function of the select box. This way, when the select box is changed, the function can update the referenced model automatically.

Update

This is my current setup:

<select id="name_select" ng-model="name_model" ng-change="getAU_name(type_model,name_model)" ng-selected="name_model" ng-options="user.name as user.name for user in AU_model[type_model]" required></select>
<input id="description_input" ng-model="description_model" disabled></input>


$scope.getAU_name = function (type, name) {
    $.each($scope.AU_model[type], function (index, value) {

        if (value.name == name || value.description === name) {
            console.log("name= " + value.name + " description= " + value.description);
            $scope.description_model = value.name;
        }

    });

However, because I have 6 similar relationships, I want to avoid repeating the getAU_name function just to set the $scope.description_model.

In essence, I have multiple models like description_model, description_model_2, etc., that I want to update with the same function.

javascript angularjs

Answer 1

Answer №1

There is a more simplified approach that can be taken here. Instead of using the type_model variable in the function, you could simply pass in the user object. Additionally, you can eliminate the need for the loop in the controller altogether.

To streamline the process, consider creating a single description object to contain all 6 models.

<select id="name_select" ng-model="name_model" ng-change="getAU_name(user, name_model, 'model1')" ng-selected="name_model" ng-options="user.name as user.name for user in AU_model[type_model]"  required></select>
<input id="description_input" ng-model="description.model1" disabled></input>

$scope.getAU_name = function (user, name, model_name) {
    if (user.name == name || user.description === name) {
        description[model_name] = user.name;
    }
};

Answer 2

There is a more simplified approach that can be taken here. Instead of using the type_model variable in the function, you could simply pass in the user object. Additionally, you can eliminate the need for the loop in the controller altogether.

To streamline the process, consider creating a single description object to contain all 6 models.

<select id="name_select" ng-model="name_model" ng-change="getAU_name(user, name_model, 'model1')" ng-selected="name_model" ng-options="user.name as user.name for user in AU_model[type_model]"  required></select>
<input id="description_input" ng-model="description.model1" disabled></input>

$scope.getAU_name = function (user, name, model_name) {
    if (user.name == name || user.description === name) {
        description[model_name] = user.name;
    }
};

Answer 3

Answer №2

Is there a reason to pass the mode if it is already in your $scope?

You can achieve the desired result with the following code:

View:

<input ng-model="stuff" ... >
<a ng-click="mychange();">click</a>

Controller:

$scope.mychange = function(){
  $scope.stuff = "newValue";
}

UPDATE:

I now understand your requirement, and I believe creating a directive would be helpful. Here's an example of how you can approach this issue:

View:

<div ng-repeat="event in events" data-testd> 
    <span>{{event.title}}</span>  
    <a ng-click="clicky(event)">click</a>      
</div>

JavaScript:

app.directive("testd", function() { 
    return function (scope, element, attrs) {
        scope.clicky = function(event){
            event.title="yolo";             
        }
    }
});

Answer 4

Is there a reason to pass the mode if it is already in your $scope?

You can achieve the desired result with the following code:

View:

<input ng-model="stuff" ... >
<a ng-click="mychange();">click</a>

Controller:

$scope.mychange = function(){
  $scope.stuff = "newValue";
}

UPDATE:

I now understand your requirement, and I believe creating a directive would be helpful. Here's an example of how you can approach this issue:

View:

<div ng-repeat="event in events" data-testd> 
    <span>{{event.title}}</span>  
    <a ng-click="clicky(event)">click</a>      
</div>

JavaScript:

app.directive("testd", function() { 
    return function (scope, element, attrs) {
        scope.clicky = function(event){
            event.title="yolo";             
        }
    }
});

Can a ng_model reference be passed to a function within an angularjs environment?

Update

Answer №1

Answer №2

Similar questions

I am interested in retrieving document information from Firebase

extract data obtained from an AJAX call

How can I extract the text following specific characters in a string using JavaScript?

Nesting promises is proving to be successful while Promise.all is currently not functioning as

What is the best way to update the content of a div using a variable within a function in AngularJS?

Utilizing the HasMany - BelongsTo relationship in Ember.js with the RESTAdapter

Node.js convention for naming error arguments in callbacks

The output of Javascript's Math.random() function is consistently yielding closely matching values

Exploring the names of rooms in Socket.IO and the corresponding number of users present in each

What is the purpose of the assertEquals() method in JSUnit?

What is the method to retrieve the base host in AngularJS?

checkbox revision

javascript: unable to modify currentTime in <audio> tag

alert the Q Promise progress within a Node.js environment

Exploring the integration of video playback within an Angular-Bootstrap modal upon opening

I am looking to reveal concealed buttons using JavaScript

Exploring ways to enhance the appearance of a Sidebar Widget Navigation using JQuery

Elevation in design ui component

Watching for changes in an object of arrays using Angular's $scope.$watch

Obtain module-specific members through programmatic means