angular.js - 將模型中的值通過參數修改為函數

Question

我有以下觀點：

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

而這個方法來自控制器：

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

但是，方法modify不會做任何事情。

我想要做的是創建一個可以通過參數從模型修改對象的函數。 我的意思是，一個函數x通過參數接收一個對象，並且在該函數內部，可以修改該對象（來自模型）。

我怎樣才能做到這一點？

看到這個小提琴，以供參考。

Answer 1

現在已經很晚了，所以我可能會錯過這個明顯的......

由於您傳遞的是字符串，因此它是通過值而不是引用傳遞的。 所以我更改了你的ng-click來引用作用域上的對象，而不是值本身。

然后，modify函數引用范圍而不是變量本身。

視圖

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

調節器

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

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

Answer 2

我的建議是將變量的名稱傳遞給函數，並將其修改為范圍的鍵/值對：

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

和

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

問題是Javascript按值傳遞簡單變量（字符串，布爾值等），而對象和數組通過引用傳遞。 另一種方法是將您的模型作為具有關鍵文本的對象，該關鍵文本由您的函數修改：

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

和

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

這是小提琴

第二種方法就是一種

Answer 3

內部處理變量。

只需從函數調用中刪除變量：

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

然后在你的控制器中，將something稱為$scope變量：

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

Answer 4

這可能有所幫助。 在這里，您可以將模型中的值從參數修改為函數。

 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> 

在Plunker上查看