CODEWITHSUNDEEP
javascriptangularjs
lante
lante

Reputation: 7336

angular.js - Modify a value from the model by parameter into a function

I have the following view:

<input ng-model="something" />
<button ng-click="modify(something)">Modify</button>

And this method from the controller:

$scope.modify = function (value) {
    value = value + " and this text";
};

However, the method modify doesn't do anything.

What I want to do is to create a function that can modify an object from the model by parameter. I mean, a function x that recieves an object by parameter, and inside that function, this object (from the model) can be modified.

How can I achieve this?

See this fiddle for reference.

Upvotes: 5

Views: 9068

Answers (4)

kiran
kiran

Reputation: 35

This may help. Here you can modify a value from the model by parameter into a function.

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

app.controller('addRemoveVehicleCntrlr', function($scope) {

  $scope.vehicles = [{
    id: 'vehicle1'
  }];
  var allVins = [];
  $scope.addNewVehicle = function() {
    var newItemNo = $scope.vehicles.length + 1;
    $scope.vehicles.push({
      'id': 'vehicle' + newItemNo
    });
    // console.log($scope.vehicles);
  };
  $scope.getdetail = function(name, index, value) {
    console.log(name + index);
    allVins.splice(index, 1, {
      "vin": name,
      "trim": value
    });
    console.log(allVins);
    $scope.myval = "dd";
  }
  $scope.changeDetails = function(index, value) {
    // allVins.splice(index, 1, {"trim":value});
    allVins[index].trim = value
    console.log(allVins);
  }
  $scope.removeVehicle = function(index) {
    $scope.vehicles.splice(index, 1);
    allVins.splice(index, 1);
    console.log(allVins)
  };

});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>
<div ng-app="angularjs-starter" ng-controller="addRemoveVehicleCntrlr">
  <div style="background:#cecece; padding:10px;">
    <div style="background:#EBEBEB; padding:10px; margin-bottom:3px" data-ng-repeat="vehicle in vehicles">
      <input type="text" ng-model="vehicle.name" name="" placeholder="Enter mobile number">
      <input type="button" value="Review" ng-click="getdetail(vehicle.name, $index, vehicle.value)" />
      <div id="myVal">{{myval}}</div>
      <a class="remove" ng-show="vehicles.length > 1" ng-click="removeVehicle($index)">Remove vehicle</a>
    </div>
  </div>
  <button class="addfields" ng-click="addNewVehicle()">Add Vehicle</button>
</div>

View on Plunker

Upvotes: 0

caffeinated.tech
caffeinated.tech

Reputation: 6548

My suggestion would be to pass the name of the variable to the function and modify it as a key/value pair of the scope:

<button ng-click="modify('something')">Modify</button>

and

$scope.modify = function(value){
    $scope[value] = $scope[value] + " and this text";
};

The problem is that Javascript passes simple variables (strings, booleans numbers etc.) by value, while objects and arrays are passed by reference. An alternative would be for your model to be an object with a key text which is modified by your function:

<button ng-click="modify(something)">Modify</button>

and

$scope.something = {text: "something"};
$scope.modify = function(value){
    value.text = value.text + " and this text";
};

Here is the fiddle

And one for the second approach

Upvotes: 1

Brent Washburne
Brent Washburne

Reputation: 13158

Handle the variables internally instead.

Simply remove the variable from your function call:

<input ng-model="something" />
<button ng-click="modify()">Modify</button>

and then in your controller, refer to something as a $scope variable:

$scope.modify = function () {
    $scope.something = $scope.something + " and this text";
};

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

It's late, so I could be missing the obvious, however....

Since you're passing a string, it's passed by value instead of reference. So I changed your ng-click to refer to the object on the scope, instead of the value itself.

The modify function then refers to the scope instead of the variable itself.

View

<div ng-app>
    <div ng-controller="SomeCtrl">
        <input ng-model="something" />
        <button ng-click="modify('something')">Modify</button>
    </div>
</div>

Controller

function SomeCtrl($scope) {
    $scope.something = "test";

    $scope.modify = function (value) {
        $scope[value] = $scope[value] + " and this text";
    };
}

Upvotes: 12

Related Questions