Question

场景是：

1.将控制器中的内容载入<select>。 2.将下拉列表中的每个选定项目添加到<p>标记，使其看起来像列表

第一部分是正确的。现在我没有得到如何'追加'所选项目。到目前为止，我能做的是，在

标签中显示所选项目。但是新项目取代了旧项目，我想将它添加到上一个项目旁边。

标记

<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
        <h1>My Shopping List</h1>
        <select ng-model='selectedItem' ng-options='obj.name for obj in Items'></select>
        <select ng-model='selectedQty'>
                <option ng-repeat="label in Items[selectedItem.id].attr">{{label}}</option>
        </select>
        <p>{{selectedItem.name}}-{{selectedQty}}</p>

</div>

控制器

app.controller("MainController",function($scope){
            $scope.inputValue="";
            $scope.selectedItem=0;
            $scope.selectedQty=null;
            $scope.Items=[
                    {
                        id:0,
                        name:'Sugar',
                        attr:['0.5 Kg','1 Kg', '2 Kg', '5 Kg']
                    },
                    {
                        id:1,
                        name:'Salt',
                        attr:['0.5 Kg','1 Kg', '2 Kg', '5 Kg']
                    },
                    {
                        id:2,
                        name:'Oil',
                        attr:['500 ml','1 Ltr', '5 Ltr']
                    },
                    {
                        id:3,
                        name:'T-Shirts',
                        attr:['S', 'M', 'L','XL', 'XXL']
                    },
            ]
    });

如何实现这一目标？

Answer 1

当您使用{{selectedItem.name}}-{{selectedQty}} 绑定当前作用域中的数据到HTML文件中的此位置时。这不是你想要做的（对吗？），因为你想在选择它们时附加所有选定的值。

尝试向ng-change="update()"元素中添加<select>之类的内容，并在控制器中添加一个附加所选项目的功能，在范围上：

$scope.selectedList = new Array();
$scope.update = function() {
   $scope.selectedList.push($scope.selectedItem.name)
}

不确定这是确切的语法，但希望你明白这一点。

如何从angular.js生成的下拉列表中将值附加到DOM

1 个答案: