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

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-model 并在 javascript 中使用该值。

在 HTML 中通常应该喜欢 ng-model="word.newExplanation[item]"，但在 javascript 中，$scope.word.newExplanation[item] 表示“未定义项目”。

有人可以帮忙吗？

Answer 1

如果我理解正确，你可以这样做：

1. 将您的列表存储在对象数组this.lists中。
2. 说明数组中的第一个对象用空字符串初始化，因此ng-repeat 将呈现第一个说明表单。
3. 然后用ng-repeat 循环它。您还可以在此处动态添加说明项的添加表单。
4. 您还可以在解释数组的嵌套ng-repeat 内创建追加/删除/编辑按钮。演示中已经添加了追加和删除功能。

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

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'];

<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>