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”

1. 没有选择的项目...

所以我收到了这个代码

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

请帮忙！

更新： 我还需要用 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 选项。检查

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

但是您将无法设置模型。

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

使用 select as 会将选择表达式的结果绑定到 模型，但和 html 元素的值将 可以是索引（对于数组数据源）或属性名称（对于 对象数据源）集合中的值。如果一个轨道通过 使用表达式，该表达式的结果将被设置为 选项和选择元素的值。

Answer 2

我暂时用隐藏输入做了一个钩子

这是一个有效的例子

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form id="aaa" ng-controller="MyCtrl">
    <input type="hidden" name="select" value="{{selectedVal}}">
    <select ng-model="selectedVal" ng-options="v.number as (v.label + v.number) group by v.group for v in list">
    </select>
    {{selectedVal}}
    <button ng-click="go()">go</button>
</form>

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

function MyCtrl($scope, $element) {

    console.log($('form'))

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

        $scope.go = function(form){
           console.log($('form#aaa').serializeArray());
        }
}

http://jsfiddle.net/uwozaof9/4/