【问题标题】:Nested ng-option inside angular ng-repeat角度 ng-repeat 内的嵌套 ng-option
【发布时间】:2015-04-19 14:05:04
【问题描述】:

我目前正在尝试将 <select> 嵌套在带有 ng-repeatdiv

类似这样的:

       <li ng-repeat="item in items >
            <div class="row">
                <div class="col-xs-7">
                    <span ng-bind="item.Name"></span>
                </div>
                <div class="col-xs-4 modal-body--ul--li__dropdown_container">
                    <select ng-model="typemodel" >
                        <option ng-repeat="usertype in item.userGroups"></option>
                    </select>
                </div>
                <div class="col-xs-1">
                    <a ng-click="add(item)"></a>
                </div>
            </div>
        </li>

在控制器中,我将项目添加到包含选定项目的新列表中。我还想将下拉列表中的值作为新值添加到控制器中的列表中。

$scope.add = function (item) {

    //New value with the value from the dropdown
    item.recipientType = typemodel;
    $scope.selected.push(item);
};

名单:

$scope.items = [  
     {           
        "Name":"Name1",
        "userGroups":[
            { "type": "gruop1" },
            { "type": "gruop2" },
            { "type": "group3" }            
        ]
     },
     {  
        "Name":"Name2",
        "userGroups":[
            { "type": "gruop1" },
            { "type": "gruop2" },
            { "type": "group3" }            
        ]
     }
    ]

简而言之,当我点击“添加”时,我需要从下拉列表中选择的值,即当前类型模型的值。

这是现在的样子,但它不起作用。我知道我必须获得正确的模型,并且可能通过 $index 跟踪项目列表,但是在整天在网上搜索解决方案后,我仍然卡住了!

感谢所有帮助。

-谢谢!

ps。如果问题中缺少某些内容,或者需要更多内容来解决此问题,请发表评论。

【问题讨论】:

  • 看完整个故事,我没有得到你想要的?
  • 对不起,我可能有点不清楚...我需要当前选定选项的值,仅用于当前项目。
  • @Rinrub 看看我的回答,我想我有你的问题。

标签: javascript angularjs select angularjs-ng-repeat ng-options


【解决方案1】:

首先,将下拉列表更改为

<select ng-options="usertype in item.userGroups" ng-model="item.recipientType">

那么当你触发添加功能时,item的属性recipientType已经设置好了。

$scope.add = function (item) {
    console.log(item.recipientType);
    $scope.selected.push(item);
};

【讨论】:

  • 你知道如何为选择设置默认值吗?顺便说一句,谢谢!
  • 由于您需要为ng-repeat 中的每个项目显示下拉列表,因此选择的默认值也应为item。所以一个合适的解决方案是预处理$scope.items并初始化item.recipientType
猜你喜欢
  • 1970-01-01
  • 2015-09-15
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多