Question

我正在使用ngRepeat动态创建管理项目以管理网络表单中的项目，但是$scope.newValueItem我遇到的问题是未定义的，可能是因为我动态创建它只是因为我想问我怎样才能获得价值来自动态创建的输入文本？

HTML

<form role="form" name="itemsManagementRrnForm">
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6" data-ng-repeat="(formControllerKey,formControllerValue) in displayModel track by $index">
                    <div class="panel panel-default">
                        <div class="panel-heading">{{formControllerKey}}</div>
                        <div class="panel-body">
                            <div style="overflow-y: scroll; height:400px;">
                                <ul>
                                    <li data-ng-repeat="formControllerValue in formControllerValue track by $index" data-ng-hide="formControllerValue.deleted">
                                        <div id="showItem" data-ng-show="!displayModel[formControllerKey][$index].editingMode">
                                            <input class="" type="submit" value="Edit" data-ng-click="toggleEdit(formControllerKey,$index)">
                                            <input class="" type="submit" value="Delete" data-ng-click="deleteValue(formControllerKey,$index)">
                                            <label>{{formControllerValue.formControllerValueName}}</label>
                                        </div>
                                        <div id="editItem" data-ng-show="displayModel[formControllerKey][$index].editingMode">
                                            <input class="" type="submit" value="update" data-ng-click="updateValue(formControllerKey,$index)">
                                            <input class="" type="submit" value="Cancel" data-ng-click="cancel(formControllerKey,$index)">
                                            <input type="text" size="30" data-ng-model="formControllerValue.formControllerValueName" placeholder="add new here">
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <input class="" type="submit" value="add" data-ng-click="addValue(formControllerKey,formControllerValue[$index].formControllerID,$index)">
                                <input type="text" size="30" data-ng-model="newValueItem" placeholder="add new here">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

JS

 (function () {
    'use strict';

    var app = angular.module('athena');

    var ItemsManagementRrnFormController = function ($scope, $location, authService, userInfoService, itemsManagementRrnFormService) {

        var username = '';
        $scope.addValue = function (formControllerKey, parentId,index) {

            $scope.model = formValueModelTemplate();
            $scope.model.formControllerID = parentId;
            $scope.model.createdBy = username;
            $scope.model.CreatedOn = new Date();
            $scope.model.modifiedBy = username;
            $scope.model.modifiedOn = new Date();
            $scope.model.formControllerValueName = $scope.newValueItem;
            $scope.displayModel[formControllerKey].push($scope.model);
            itemsManagementRrnFormService.postValue($scope.model);
            $scope.newValueItem = '';

        };
    };

    app.controller('ItemsManagementRrnFormController', ['$scope', '$location', 'authService', 'userInfoService', 'itemsManagementRrnFormService', ItemsManagementRrnFormController]);

}());

Answer 1

您遇到了范围问题。

您的控制器有自己的范围，其中只有一个$scope.newValueItem。

但是ng-repeat为每次迭代创建了一个新范围，您的控制器$scope.newValueItem与ng-repeat中的每个都独立;

因此，您可以选择将newValueItem传递给add方法，或者在每个显示模型中展开它以获得输入值。这将允许您在单击添加时单独清除每个，并在每个newValueItem子范围上停止Angular重复ng-repeat。

$scope.displayModel = {
   controllerKey1: {
      data: [],
      newValueItem: ''
   }
}

我创建了一个快速小提琴作为例子：http://jsfiddle.net/g9tm6y0c/5/

编辑：创建一个示例小提琴演示范围。 http://jsfiddle.net/9w0dy8ut/

通过ng-repeat到控制器从动态创建的文本字段中获取日期？

1 个答案: