0

我已经减少了我的表单以使用 ngRepeat 创建输入字段。所以属性的项目是在我的 ctrl.xml 中定义的。

首先是 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>

第一控制：

    $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 回答