Question

我有ng-repeat。我重复的模型看起来像这样：

var customer = [
    {
        displayName: 'Name',
        childProperties: [{property: 'LastName'},{property: 'FirstName'}]
    },
    { property: 'Address1', displayName: 'Address' },
    {
        displayName: '',
        childProperties: [{ property: 'City' }, { property: 'State' }, { property: 'ZipCode' }]
    },                
    { property: 'HomePhone', icon: 'fa fa-home', filter: 'tel' }]

这是HTML

<div class="col-sm-{{columns}}" ng-repeat="obj in model track by $index">
    <div class="loading" ng-if="loading"><i class="fa fa-spin fa-spinner"></i></div>
    <form class="form-horizontal" ng-if="!loading">
        <div class="form-group" ng-repeat="prop in obj track by $index" ng-click="toggleEdit(prop, $event)">
            <div class="col-sm-4 right">
                <label ng-if="prop.icon"><i class="icon {{prop.icon}}"></i></label>
                <label ng-if="!prop.icon" class="control-label">{{prop.displayName || prop.property}}</label>
            </div>
            <div class="col-sm-7" id="value">
                <input type="{{inputtype()}}" class="form-control input-sm" data-ui-help="{{prop.type}}" ng-disabled="!prop.enable" ng-model="prop.value">
            </div>
            <i class="fa fa-pencil edit" ng-if="!prop.enable && !editing"></i>
            <i class="fa fa-save edit" ng-if="prop.enable && editing" ng-click="save(prop, $event)"></i>
        </div>
    </form>
</div>

您会在ng-repeat上看到我有ng-click。我想在单击该行时启用表单。当我有一个没有子属性的元素时，它足够简单，可以启用输入。如果模型中有childProperties，我想为每个子属性附加多个输入。我似乎无法弄清楚我缺少什么来让scope编译正确的输出。

function toggle(prop, e) {
    if (!prop.enable) {
        if (prop.childProperties) {
            e.currentTarget.children[1].innerHTML = '';
            $compile('<div ng-repeat="child in prop.childProperties"><input type="text" class="form-control" ng-model="child.value"></div>')(scope).appendTo(e.currentTarget.children[1]);
        } else {

            prop.enable = true;
        }
    } else {
        prop.enable = false;
    }
}

我只是得到角度评论，好像元素中没有任何内容可以重复

Answer 1

问题在于：

ng-repeat="prop in obj track by $index"

代码中的“obj”变量在哪里？

尝试了你的代码：

<body ng-app="app">

    <div ng-controller="AppCtrl">

        <div class="form-group" ng-repeat="prop in customer track by $index" ng-click="toggleEdit(prop, $event)">

            {{prop}}

            <div class="col-sm-4 right">
                <label ng-if="prop.icon"><i class="icon {{prop.icon}}"></i></label>
                <label ng-if="!prop.icon" class="control-label">{{prop.displayName || prop.property}}</label>
            </div>

            <div class="col-sm-7" id="value">
                <!--Trying to update this area -->
                <input type="text" class="form-control input-sm" data-ui-help="{{prop.type}}" ng-disabled="!prop.enable" ng-model="prop.value">
            </div>

            <i class="fa fa-pencil edit" ng-if="!prop.enable"></i>
            <i class="fa fa-save edit" ng-if="prop.enable" ng-click="save(prop, $event)"></i>

        </div>


    </div>

    <script src="../JavaScript/angular.1.2.23.min.js"></script>
    <script>

        angular.module("app", [])
            .controller("AppCtrl", function ($scope) {

                $scope.customer = [
                    {
                        displayName: 'Name',
                        childProperties: [{ property: 'LastName' }, { property: 'FirstName' }]
                    },
                    { property: 'Address1', displayName: 'Address' },
                    {
                        displayName: '',
                        childProperties: [{ property: 'City' }, { property: 'State' }, { property: 'ZipCode' }]
                    },
                    { property: 'HomePhone', icon: 'fa fa-home', filter: 'tel' }];

                $scope.toggle = function (prop, e) {
                    if (!prop.enable) {
                        if (prop.childProperties) {
                            e.currentTarget.children[1].innerHTML = '';
                            $compile('<div ng-repeat="child in prop.childProperties"><input type="text" class="form-control" ng-model="child.value"></div>')(scope).appendTo(e.currentTarget.children[1]);
                        } else {

                            prop.enable = true;
                        }
                    } else {
                        prop.enable = false;
                    }
                }

            });



    </script>

</body>

渲染的模板，没有检查背后的逻辑

AngularJS $在ng-repeat中编译

1 个答案: