angular.js - 将模型中的值通过参数修改为函数

Question

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.

Answer 1

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";
    };
}

Answer 2

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

Answer 3

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";
};

Answer 4

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