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

时间:2015-03-24 17:57:50

标签: javascript html angularjs controller

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

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

由于我使用ng-repeat添加必要数量的文本框,因此每个值只有一个ng模型而不是不同的模型。

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很陌生,网上的答案到目前为止对我来说都没有用。

1 个答案:

答案 0 :(得分:1)

我相信您会希望track by $index关注ngRepeat,然后将该值与array上定义的$scope相关联。

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

<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

        });

     };

  }
]);

给那个'大学'尝试 - 但它应该适合你!正如你所看到的,它是一个 teeny 位清洁!