CODEWITHSUNDEEP
angularjsangularjs-directiveangularjs-ng-repeat
yelliver
yelliver

Reputation: 5926

angular change property of scope by reference from ng-init

I have an input and a button, I want when the button clicked, the value of input will be changed:

<input type="text" ng-model='myModel'>
<button ng-click="changeMyModel()">my button</button>

in the controller:

$scope.changeMyModel = function () {
   $scope.myModel = 'new value';
}

It works, but when I want to pass myModel into changeMyModel() function:

<input type="text" ng-model='myModel'>
<button ng-click="changeMyModel(myModel)">my button</button>

$scope.changeMyModel = function (myModel) {
   myModel = 'new value';
}

It does not work

I really want pass a property into a function because when I use ng-repeat, each loop, the model is different, and I can not declare n var in scope for n elements of an array when loop (I have $sope.objects):

    <div ng-repeat="object in objects">
            <input type="text" ng-model='object'>
            <button ng-click="changeMyModel(object )">my button</button>
    </div>

Upvotes: 1

Views: 1030

Answers (3)

Cuong Nguyen
Cuong Nguyen

Reputation: 46

In ng-repeat, it's OK to modify object, you could do something like this: 

<div class="test" ng-controller="Ctrl">
  <div ng-repeat="task in tasks">
   <button ng-click="removeTask(task);">{{task.name}}</button>
  </div>
<div>

In controller: 

var app = angular.module('app', []);

function Ctrl($scope) {
  $scope.tasks = [{id:1,'name':'test1'}, {id:2,'name':'test2'}, {id:3,'name':'test3'}];

  $scope.removeTask = function(task){
        task.name = 'abc';
  };
}

Or you could pass your item index in the list to your function

Upvotes: 1

Narek Mamikonyan
Narek Mamikonyan

Reputation: 4611

You should define your variable as an object, as mentioned @shaunhusain,

I made an example for you

 function($scope){
       $scope.user = {};
        $scope.user.name = 'test'
       $scope.changeMyModel = function (myModel) {
          myModel.name = 'new value';
       }
    })

and also recommendation to read

Upvotes: 1

Trevor A Green
Trevor A Green

Reputation: 11

That is really not cool that you can't treat a string property of an as an object by adding some modifier.

You want to do. 

$scope.user = "name";

$scope.setthisscopevariable = function(scopevariable) {
    scopevariable = "newname";
}
$scope.setthisscopevariable($scope.user);

But that just evaluates to var scopevariable = "newname" because it passes in the string and not a reference to the scope. And there is no way to pass it in as a reference without changing $scope.user to an object with properties that you are going to set.

So you can do 

$scope.user = "name";
$scope.setthisscopevariable = function(scopevariable) {
    /* not doing anything with scopevariable by you could */ 
    return "newname";
}
$scope.user = $scope.setthisscopevariable($scope.user);

Which is all good in your controller for using a function with no knowledge of the object to set a value.

Which when bound to a model it could look like this.

<input type="text" ng-model='myModel'>
<button ng-click="changeMyModel('myModel')">my button</button>

$scope.changeMyModel(modelName) {
    $scope[modelName] = "newname";        
};

I didn't test that but I think it should work. It allows you to pass the $scope.myModel reference in as a string so you can then access that model in the $scope with Array syntax. This is not as clean as you want because your function still has to deal with the fact that there is an object and a child object as in the other answer, but it allows you to pass in the child object as a string instead of creating creeping children. If you want to take it a step further and have the function exist outside the controller in a library, you would still need to take into account that you need to pass an object in. 

<input type="text" ng-model='myModel'>
<button ng-click="changeMyModel('myModel')">my button</button>

$scope.changeMyModel(modelName) {
    changeText($scope, modelName);    
};

var changeText = function(obj, property) {
    obj[property] = "newname"; 
}

I can't answer it in abstract coding terminology, so I thought I just try with a laymen's example. :)

Upvotes: 1

Related Questions