Angularjs 使用一个 ng-model 将多个输入从 HTML 传递到控制器

Question

所以我的 html 中有一些输入文本框，我想将它们发送到我的控制器并将它们添加到一个对象中。让我感到困惑的是如何仅使用一个 ng-model 传递多个值。到目前为止，这是我 html 中读取所需输入数量的内容：

<div ng-repeat = "parameter in selectedMO.parameters">
   <label> Value for {{parameter.name}} </label>
   <input type="text" ngmodel="value"/>
</div>

因为我使用 ng-repeat 添加必要数量的文本框，所以我只有一个 ng-model，而不是每个值都有不同的 ng-model。

angular.module('app.runBehaviorOper', [])
   .controller('runBehaviorOper', [ 'discoveryService','$scope', '$route',  
      function( discoveryService, $scope, $route) {

     //what should I do here in order to add each value inputted into 
     //an object in order to then be able to send it a function inside 
     //my discoveryService file

     $scope.getBehaviorExec = function() { //this is called with the submit
      // button in the html code

        discoveryService.getBehaviorExec({ 
           oid:              $scope.oid,
           parameters:       //send parameters

        });

     };

  }
]);

我是 angularjs 的新手，到目前为止，在线答案对我来说还没有用。

Answer 1

我相信您会想利用 track by $index 关于 ngRepeat，然后将该值与 $scope 上定义的 array 相关联。

您的代码块最终可能看起来像：

<div ng-repeat = "parameter in selectedMO.parameters track by $index">
   <label> Value for {{parameter.name}} </label>
   <input type="text" ng-model="values[$index]"/>
</div>

注意：我将 ngmodel="value" 更改为 ng-model="values[$index]"

然后在你的控制器中：

angular.module('app.runBehaviorOper', [])
   .controller('runBehaviorOper', [ 'discoveryService','$scope', '$route',  
      function( discoveryService, $scope, $route) {

     $scope.values = []; // This will contain all the input values

     $scope.getBehaviorExec = function() { //this is called with the submit
      // button in the html code

        discoveryService.getBehaviorExec({ 
           oid:              $scope.oid,
           parameters:       $scope.values // I'm assuming this is where you would use the various input values

        });

     };

  }
]);

希望对你有用！

方案二：

另一种方法（可能更简洁）是利用您正在迭代的同一对象：

<div ng-repeat = "parameter in selectedMO.parameters">
   <label> Value for {{parameter.name}} </label>
   <input type="text" ng-model="parameter.value"/>
</div>

然后在你的控制器中：

angular.module('app.runBehaviorOper', [])
   .controller('runBehaviorOper', [ 'discoveryService','$scope', '$route',  
      function( discoveryService, $scope, $route) {

     $scope.getBehaviorExec = function() { //this is called with the submit
      // button in the html code

        discoveryService.getBehaviorExec({ 
           oid:              $scope.oid,
           parameters:       $scope.selectedMO.parameters // you will still need to access each $scope.selectedMO.parameters value since the parameters is now not just an array of input values

        });

     };

  }
]);

让老大学尝试一下 - 但它应该适合你！正如您所看到的，它极小更干净了！

Angularjs 使用一个 ng-model 将多个输入从 HTML 传递到控制器

Angularjs passing multiple inputs from HTML to controller using one ng-model

html

javascript

controller

angularjs