通过控制器函数中的ng-repeat从动态有界文本字段中获取数据

时间:2015-03-08 01:38:47

标签: angularjs angularjs-scope angularjs-ng-repeat

我一直在尝试从输入文本字段中获取控制器中的值,这些字段是通过ng-repeat生成的,但是无法执行此操作。 这是我的代码片段

<div ng-controller= "educationCtrl"  ng-init="showEducation()">
  <div ng-repeat="value in gg" for="{{value}}">
    <p>
      <table>
        <tr>
          <td>University Name</td>
          <td><input type="text" ng-model ="uname" value=""  placeholder=""/></td>
        </tr>
        <tr>
          <td>Degree </td>
          <td><input type="text" ng-model ="degname" value=""></td>
        </tr>
        <tr>
          <td>Year of Joining</td>
          <td><input type="text" ng-model ="yoj" value=""></td>
        </tr>
        <tr>
          <td>Year of leaving</td>
          <td><input type="text" ng-model ="yol" value=""></td>
        </tr>
        <tr>
          <td>Grades</td>
          <td><input type="text" ng-model ="grades" value=""></td>
        </tr>
        <tr>
          <td><button type="submit" data-ng-click = "educationUpdate()" class="btn btn-primary" style="margin:30px" >update</span></button></td>
          <td><button type="submit" data-ng-click= "toggle()" class="btn btn-primary" style="margin:30px" >Cancel</span></button></td>
        </tr>
      </table>
    </p>
  </div>
function educationCtrl($scope, $http, $location) {
  $scope.educationUpdate = function() {
    alert("uname +"$scope.uname+ "degname :" +$scope.degname);
  };
}

但未能这样做......

1 个答案:

答案 0 :(得分:0)

您正在进行迭代,因此每个输入集的ng模型必须不相同。尝试为“gg”的“值”子项添加值:

 <tr><td>University Name</td><td><input type="text" ng-model ="value.uname"
 value=""  placeholder=""/></td></tr>

然后在ng-submit函数中添加$ index值:

<tr><td><button type="submit" data-ng-click = "educationUpdate($index)" class="btn btn-primary" style="margin:30px" >update</span></button></td>

在您的控制器中

$scope.educationUpdate = function(idx) {
    alert("uname +"$scope.bb[idx].uname+ "degname :" +$scope.bb[idx].degname);
};

希望这有帮助。

小事,应该更好地使用表单验证系统角度,使用ng-submit而不是ng-click:

<form name="" ng-submit="educationUpdate($index)">...code...</form>

更多详情on Angular docs