AngularJS选择列表,其中包含带有组合标签的所选项目的optgroups

Question

我需要制作具有良好价值和标签的分组列表.标签应按标签+值组合.还应选择一个项目.

我的代码

<div ng-controller="MyCtrl">
    <select ng-model="selectedVal" ng-options="v.label as v.number group by v.group for v in list">
    </select>
</div>

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

    $scope.selectedVal = 234;
    $scope.list = [
        {
        number: 123,
        label: "A",
        group: 'aa'},
    {
        number: 234,
        label: "B",
        group: 'aa'},
    {
        number: 345,
        label: "C",
        group: 'bb'},
        ];
}

http://jsfiddle.net/mn2nk6rb/2/

在我的代码中:1:值不正确,它们是0,1,2,我期望123,234,345

2:标签应为"A 123","B 234","C 345"

3. 没有选中的项目......

所以我收到了这段代码

<select ng-model="selectedVal" ng-options="v.label as v.number group by v.group for v in list" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <optgroup label="aa">
        <option value="0">123</option>
        <option value="1">234</option>
    </optgroup>
    <optgroup label="bb">
        <option value="2">345</option>
    </optgroup>
</select>

我期待着

<select ng-model="selectedVal" ng-options="v.label as v.number group by v.group for v in list" class="ng-pristine ng-valid">
    <optgroup label="aa">
        <option value="123">A 123</option>
        <option value="234" selected>B 234</option>
    </optgroup>
    <optgroup label="bb">
        <option value="345">C 345</option>
    </optgroup>
</select>

请帮忙!

UPD:我还需要用jQuery序列化我的表单.所以我非常需要选项中的好价值.

这是更新小提琴提交 http://jsfiddle.net/uwozaof9/2/

Answer 1

分叉你的小提琴

http://jsfiddle.net/uwozaof9/1/

<div ng-controller="MyCtrl">
    <select ng-model="selectedVal" ng-options="v.number as (v.label + v.number) group by v.group for v in list">
    </select>
    {{selectedVal}}
</div>

如果要序列化表单,可以使用track by option.校验

http://jsfiddle.net/uwozaof9/5/

但是你将无法设置你的模型.

更多信息请查看https://docs.angularjs.org/api/ng/directive/ngOptions.

使用select as会将select表达式的结果绑定到模型,但是html元素的值将是集合中值的索引(对于数组数据源)或属性名称(对象数据源).如果使用了跟踪表达式,则该表达式的结果将被设置为选项的值并选择元素.