Question

我正在开发一个网络应用程序并坚持到这里：

HTML的一部分：

<div class="input-group">
<select name="select" class="form-control input-group-select" ng-options="key as key for (key , value) in pos" ng-model="word.pos" ng-change="addPos()">
    <option value="">Choose a POS</option>
</select>
<span class="sort"><i class="fa fa-sort"></i></span>
</div>

<ul class="listGroup" ng-show="_pos.length > 0">
<li class="list" ng-repeat="item in _pos track by $index">
    <span>
        {{item.pos}}
        <span class="btn btn-danger btn-xs" ng-click="delPos($index)">
            <span class="fa fa-close"></span>
        </span>
    </span>
<!-- I wanna add the input which can add more list item to the item.pos-->
    <div class="input-group">
        <a class="input-group-addon add" ng-class=" word.newWordExp ? 'active' : ''" ng-click="addItemOne()"><span class="fa fa-plus"></span></a>
        <input type="text" class="form-control exp" autocomplete="off" placeholder="Add explanation" ng-model="word.newWordExp" ng-enter="addExpToPos()">
        {{word.newWordExp}}
    </div>
</li>
</ul>

部分js：

$scope._pos = [];
$scope.addPos = function () {
    console.log("You selected something!");
    if ($scope.word.pos) {
        $scope._pos.push({
            pos : $scope.word.pos
        });
    }
    console.dir($scope._pos);
    //console.dir($scope.word.newWordExp[posItem]);
};
$scope.delPos = function ($index) {
    console.log("You deleted a POS");
    $scope._pos.splice($index, 1);
    console.dir($scope._pos);
};

$scope.addItemOne = function (index) {
    //$scope.itemOne = $scope.newWordExp;
    if ($scope.word.newWordExp) {
        console.log("TRUE");
        $scope._newWordExp.push({
            content: $scope.word.newWordExp
        });
        console.dir($scope._newWordExp);
        $scope.word.newWordExp = '';
    } else {
        console.log("FALSE");
    }
};
$scope.deleteItemOne = function ($index) {
    $scope._newWordExp.splice($index, 1);
};

所以，我要做的是选择一个选项并将值附加到$ scope._pos，然后显示为包含我所有选择的列表。

在每个列表项中，添加一个输入字段并将子列表添加到$ scope._pos值。

ñ。
- 说明1
- 说明2
- 说明3
进阶。
- 说明1
- 说明2

所以我不知道如何生成动态ng模型并使用javascript中的值。

Normaly应该在HTML中使用ng-model =“word.newExplanation [item]”，但在javascript中，$ scope.word.newExplanation [item]表示“item is not defined”。

任何人都可以帮忙吗？

Answer 1

如果我理解它的相关性，你可以这样做：

将您的列表存储在对象this.lists的数组中。
explain数组中的第一个对象用空字符串初始化，因此ng-repeat将呈现第一个解释形式。
然后用ng-repeat循环遍历它。在那里，您还可以动态添加解释项的添加表单。
您还可以在解释数组的嵌套ng-repeat内创建追加/删除/编辑按钮。附加＆amp;删除已经在演示中添加。

请在下面或jsfiddle中找到演示。

＆＃13;

angular.module('demoApp', [])
    .controller('appController', AppController);

function AppController($filter) {
    var vm = this,
        explainTmpl = {
            name: '',
            text: ''
        },
        findInList = function (explain) {
            return $filter('filter')(vm.lists, {
                explanations: explain
            })[0];
        };

    this.options = [{
        name: 'option1',
        value: 0
    }, {
        name: 'option2',
        value: 1
    }, {
        name: 'option3',
        value: 2
    }];

    this.lists = [];

    this.selectedOption = this.options[0];

    this.addList = function (name, option) {
        var list = $filter('filter')(vm.lists, {
            name: name
        }); // is it in list?


        console.log(name, option, list, list.length == 0);
        //vm.lists
        if (!list.length) {
            vm.lists.push({
                name: name,
                option: option,
                explanations: [angular.copy(explainTmpl)]
            });
        }
    };

    this.append = function (explain) {
        console.log(explain, $filter('filter')(vm.lists, {
            explanations: explain
        }));
        var currentList = findInList(explain);
        currentList.explanations.push(angular.copy(explainTmpl));
    }

    this.delete = function (explain) {
        console.log(explain);
        var currentList = findInList(explain),
            index = currentList.explanations.indexOf(explain);
        if (index == 0 && currentList.explanations.length == 1) {
            // show alert later, can't delete first element if size == 1
            return;
        }
        currentList.explanations.splice(index, 1);
    };
}

AppController.$inject = ['$filter'];

＆＃13;

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" ng-controller="appController as ctrl">
    <select ng-model="ctrl.selectedOption" ng-options="option.name for option in ctrl.options"></select>
    <input ng-model="ctrl.listName" placeholder="add list name" />
    <button class="btn btn-default" title="add list" ng-click="ctrl.addList(ctrl.listName, ctrl.selectedOption)"><i class="fa fa-plus"></i>

    </button>
    <div class="list-group">Debug output - current lists:<pre>{{ctrl.lists|json:2}}</pre>

        <div class="list-group-item" ng-repeat="list in ctrl.lists">
             <h2>Explanations of list - {{list.name}}</h2>

             <h3>Selected option is: {{ctrl.selectedOption}}</h3>

            <div class="list-group" ng-repeat="explain in list.explanations">
                <div class="list-group-item">
                    <p class="alert" ng-if="!explain.title">No explanation here yet.</p>
                    <div class="well" ng-if="explain.title || explain.text">
                         <h4>
                {{explain.title}}
                </h4>

                        <p>{{explain.text}}</p>
                    </div>Title:
                    <input ng-model="explain.title" placeholder="add title" />Text:
                    <input ng-model="explain.text" placeholder="enter text" />
                    <button class="btn btn-primary" ng-click="ctrl.append(explain)">Append</button>
                    <button class="btn btn-primary" ng-click="ctrl.delete(explain)">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

＆＃13;

如何在javascript中从ng-repeat获取动态ng-model？

1 个答案: