AngularJS：我如何使用對象ID創建一組表單域

Question

編輯：我的工作了，我需要使用[tray.id]代替{{tray.id}}

我有一組「托盤」，我想構建一個表單來編輯它們，但我不確定如何爲每個托盤設置ng模型，以便我可以區分它們。

這不起作用，角度不喜歡我把{{tray.id}}到NG-模型

<div ng-repeat="tray in formData.trayData"> 

    <div class="form-group"> 
     <label class="control-label" for="formData.trays.{{tray.id}}.name">Name:</label> 
     <div class="controls"> 
      <input type="text" class="form-control" name="tray.{{tray.id}}.name" ng-model="formData.trays.{{tray.id}}.name" placeholder="Name"> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="control-label" for="formData.trays.{{tray.id}}.seal">Seal:</label> 
     <div class="controls"> 
      <input type="text" class="form-control" name="tray.{{tray.id}}.seal" ng-model="formData.trays.{{tray.id}}.sealed" placeholder="Seal"> 
     </div> 
    </div> 

</div> 

在我的控制我的設置FORMDATA使用JSON對象從API

$scope.formData.trayData = $scope.surgeryDetails.trays; 
$scope.formData.trays = []; 

這裏是我從{{formdata.trayData}}得到

[{"id":8,"name":"Tray 1","seal":"Foo","status_id":9},{"id":9,"name":"Tray 2","seal":"Bar","status_id":9}] 

Answer 1

我很高興你想通ngModel部分出在你的流量ñ。

但是，我也只是想提一下，如果您使用name屬性來處理驗證，您可能無法獲得期望的結果。

Angular中目前有一個bug，用於防止動態元素驗證。解決方法由Thinkscape在評論中提供，或者here是一個正確代碼的解鎖器。這裏是主要部分：

angular.module('myModule', []) 
    .config(function($provide) { 
    $provide.decorator('ngModelDirective', function($delegate) { 
     var ngModel = $delegate[0], 
     controller = ngModel.controller; 
     ngModel.controller = ['$scope', '$element', '$attrs', '$injector', 
     function(scope, element, attrs, $injector) { 
      var $interpolate = $injector.get('$interpolate'); 
      attrs.$set('name', $interpolate(attrs.name || '')(scope)); 
      $injector.invoke(controller, this, { 
      '$scope': scope, 
      '$element': element, 
      '$attrs': attrs 
      }); 
     } 
     ]; 
     return $delegate; 
    }); 
    $provide.decorator('formDirective', function($delegate) { 
     var form = $delegate[0], 
     controller = form.controller; 
     form.controller = ['$scope', '$element', '$attrs', '$injector', 
     function(scope, element, attrs, $injector) { 
      var $interpolate = $injector.get('$interpolate'); 
      attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope)); 
      $injector.invoke(controller, this, { 
      '$scope': scope, 
      '$element': element, 
      '$attrs': attrs 
      }); 
     } 
     ]; 
     return $delegate; 
    }); 
    })