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（＆＃39; myApp＆＃39;，[]）;

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：标签应为＆＃34; A 123＆＃34;，＆＃34; B 234＆＃34;，＆＃34; C 345＆＃34;

没有选定的项目......

所以我收到了这段代码

<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元素的值将是索引（对于数组数据源）或属性名称（对于对象数据源）集合中的值。如果是一个曲目使用表达式，该表达式的结果将被设置为选项和选择元素的值。

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/

AngularJS选择列表，其中包含带有组合标签

2 个答案: