0

フォームを縮小して、ngRepeat で入力フィールドを作成しました。したがって、属性の項目は ctrl で定義されています。

まず ModalCtrl のコード:

...
$scope.form = [
  {
     label: 'Firstname',
     fieldType: 'text',
     name: 'Fname',
     propertyName: 'fname',
     pattern: /^[a-zA-Z]{4}[a-zA-Z]*/,
     required: true,
     errRequired: 'Field is required.',
     errPattern: 'The name must have at least 4 characters.'
  },
  {
     label: 'Max. Age',
     fieldType: 'number',
     name: 'Maxage',
     propertyName: 'maxAge',
     pattern: /^[0-9][0-9]?$|^100$/,
     required: true,
     min: 0,
     max: 100,
     errType: 'Only numbers are allowed.',
     errRequired: 'Field is required.',
     errPattern: 'Numbers between 0 and 100.'
 }
];

このオブジェクトの配列は、次のフォーム ビュー (モーダル ウィンドウ) に追加されます。

<div class="modal-body">
  <form class="form-horizontal" name="editForm" novalidate>
    <div class="form-group-sm has-feedback" ng-repeat="el in form" ng-class="{ 'has-error' : hasError(editForm, el.name), 'has-success' : hasSuccess(editForm, el.name) }">
       <label class="control-label" for="{{el.id}}">{{el.label}}</label>
       <input type="{{el.fieldType}}"
              class="form-control" 
              placeholder="{{el.label}}"  
              name="{{el.name}}" 
              ng-model="selected[el.propertyName]"    
              ng-pattern="el.pattern" 
              ng-required="{{el.required}}"
              ng-minlength="{{el.min}}"
              ng-maxlength="{{el.max}}"
              />
       <p class="help-block" ng-show="editForm[el.name].$error.number">{{el.errType}}</p>
       <p class="help-block" ng-show="editForm[el.name].$error.required && editForm[el.name].$touched">{{el.errRequired}}</p>
       <p class="help-block" ng-show="editForm[el.name].$error.pattern">{{el.errPattern}}</p>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button class="btn btn-default" ng-disabled="editForm.$invalid"  ng-click="createItem(selected)" type="submit">Create</button>
    <button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>

オブジェクトを作成しようとすると、常に空のオブジェクト「NULL」が実行されます。どこにエラーがあるのか​​わからない!? 他の項目は正しく割り当てられていますが、ngModel だけが割り当てられていません。

編集：

リストを含む最初のビューは次のとおりです。

<tr ng-repeat="item in nameslist" ng-click="btnOpen(this.item)" style="cursor:pointer">
     <td>{{ item.fname }}</td>
     <td class="max-spread">{{ item.maxAge }}</td>
</tr>

最初のCtrl:

    $scope.btnOpen = function (item) {
     (!item) ? ($scope.selectedItem = null) : ($scope.selectedItem = item);           
      modalService.openDialog('views/editform.html', $scope.selectedItem)
}

モーダルサービス:

..
openDialog: function (templateUrl, selectedItem) {
            return $modal.open({
                templateUrl: templateUrl,
                controller: 'ModalCtrl',
                resolve: {
                    selected: function () {
                        return selectedItem;
                    }
                }
            });
        }
4

1 に答える 1

0

「ModalCtrl」で「selected」を渡し、それをスコープに設定していることを確認してください。これは、UI Bootstrapdocs で「items」オブジェクトを使用する場合と同様です。

https://angular-ui.github.io/bootstrap/#/modal

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = items;
...
});
于 2015-06-24T16:59:23.177 に答える