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

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.

我想要做的是创建一个可以通过参数从模型修改对象的函数。我的意思是,一个函数x通过参数接收一个对象,并且在该函数内部,可以修改该对象(来自模型)。

How can I achieve this?

我怎样才能做到这一点?

See this fiddle for reference.

请参阅此小提琴以供参考。

4 个解决方案

#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.

由于您传递的是字符串,因此它是通过值而不是引用传递的。所以我改变你的ng-click来引用作用域上的对象,而不是值本身。

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

然后,modify函数引用范围而不是变量本身。

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

#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:

问题是Javascript按值传递简单变量(字符串,布尔值等),而对象和数组通过引用传递。另一种方法是将您的模型作为具有关键文本的对象,该关键文本由您的函数修改:

<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

第二种方法就是一种

#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变量:

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

#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

在Plunker上查看

#1