从 ng-repeat 向 ng-model 传递值

Question

我有一个表单，它在存储到数据库之前将其输入传递给ng-model。其中之一是从其数据库表中获取的动态值（预生成的代码）。

<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
  <input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" />
</div>

理论上，一旦ng-model 获得值，它就会将其传递给insert 调用，以便数据库将其与其余字段一起存储。

scope.processForm = function(isValid){
    scope.$submitted = true;

    if(isValid && state.$current=='registration.signupapp') {
        http.post("server/insert.php",{'code': scope.codes.code, 'fullname': scope.formData.name, 'instagram': scope.formData.igname, 'email': scope.formData.email, 'mobile': scope.formData.mobile, 'location': scope.formData.location.type, 'branch': scope.formData.branches.branch}).success(function(data, status, headers, config){
    console.log("inserted successfully");
    });
        state.go('registration.success');
    } else if(!isValid) {
        //alert("Please make sure that you entered everything correctly.");
    }
};

很遗憾，这不起作用。 1）有人告诉我，你不能简单地将ng-value 传递给input[text] 内的ng-model。 2) 即使在将值传递给ng-model 的情况下，我也不确定在控制器内部调用什么，因为scope.codes.code 或scope.formData.code 似乎不起作用并且得到not defined 错误或@ 987654333@.

简而言之，我该怎么做：

• 获取ng-repeat 生成的值，设置为limitTo:1。
• 将其实时存储到ng-model（因为这非常依赖于 动态下拉菜单）。
• 将ng-model 的值传回controller。
• 将其发送回服务器并将其存储到数据库中。

Answer 1

我猜 ng-init 应该可以帮到你。

从以下位置更改您的代码段：

<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
  <input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" />
</div>

到：

<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1" ng-init="formData.code=codes.code">
  <input class="form-control" type="text" name="code" ng-model="formData.code" readonly="" />
</div>

Answer 2

这确实是做作，但这里有一个非常简化的演示：

var app = angular.module('demo', []);

app.filter('myFilter', function(){
  return function(data){
    return data[0];
  };
});

app.controller('MainCtrl', ['$scope', '$filter', function($scope, $filter){
  var myfilter = $filter('myFilter');
  
  $scope.response = ['001', '002', '003', '004', '005'];
  
  $scope.items = ['Item 1', 'Item 2', 'Item 3']
  
  $scope.formData = {};
  
  $scope.$watch('formData.select', function(newval){
    if (newval === 'Item 1') {
      $scope.formData.code = myfilter($scope.response);
    } else {
      $scope.formData.code = '';
    }
  });
  
}]);

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div class="container" ng-app="demo" ng-controller="MainCtrl">
  <pre>formData.code = {{formData.code || "No Code for this Item"}}</pre>
  <div class="form-group">
    <label>Select a Value: <em>Choose Item 1 to update formData.code</em></label>
    <select class="form-control" ng-model="formData.select" ng-options="item as item for item in items"></select>
  </div>
  <div class="form-group">
    <label>formData.code:</label>
    <input class="form-control" type="text" name="code" ng-model="formData.code"  />
  </div>
</div>

您已经有了响应，所以不要使用 ng-repeat，只需将值添加到控制器上的 formData.code 即可。如果您需要使用自定义过滤器，您可以将 $filter 服务作为依赖项传递给您的控制器。

编辑：

我没有注意到 formData.code 依赖于另一个表单值的部分，所以我更新了演示以包含一个 $watch 函数。