7

我们的应用程序中有一些不能使用ng-options的下拉菜单，因为我们需要在 <options> 标签本身上设置 title 属性，而这对于ng-options是不可能的。

我们需要标题的原因是因为 IE < 9 会去掉过长的值，并且它们仅在标题中可见（在元素悬停时显示）

现在，要查看我遇到的问题，请查看以下 JS fiddle。

http://jsfiddle.net/nstuart/nF7eJ/（HTML 位）

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-model="params.value">
        <option value="">Any</option>
        <option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}" ng-selected="{{v.value == params.value}}">{{v.name}}</option>
    </select>
    <p>{{params.value}}</p>
</div>

理想情况下，选择会选择“test3”，但您可以看到它被设置为空选项。我理解这是因为 ng-model 的值不存在于ng-options中，但那是因为我没有定义一个！

关于如何让这样的东西工作的任何想法？甚至可以为 ng-options 生成的选项添加标题，以便我们可以使用它？

编辑

将小提琴更新为：http: //jsfiddle.net/nstuart/nBphn/2/，如下面的答案所述。

4

5 回答 5

16

实际上，只需从 ng-selected 中的表达式中删除花括号，它就会起作用：

<option ng-repeat="v in options" 
        value="{{v.value}}" 
        title="{{v.name}}" 
        ng-selected="v.value == params.value">{{v.name}}
</option>

小提琴

于 2013-02-15T18:14:41.440 回答
1 
<option ng-repeat="v in options" value="{{v.value}}" title="{{v.name}}"
        ng-selected="checkOption(v.value)">{{v.name}}</option>

$scope.checkOption = function(value){
    return($scope.params.value == value);
}

小提琴

[更新] 忘记传递值变量。更新了小提琴和答案。

于 2013-02-15T18:10:04.803 回答
1

对于手动选项，您只需要使用ng-model指令。该ng-model指令为所选选项提供了两种数据绑定方式。

jsfiddle：http: //jsfiddle.net/rpaul/1p9b5et8/1/

<body ng-app ng-controller="AppCtrl">
<select ng-model="selectedFruit" >
    <option value ='1'> Apple</option>
     <option value ='2'> Orange</option>
</select>
   Selected value is  {{selectedFruit}}
</body>


function AppCtrl($scope) {     

      $scope.selectedFruit = '1';
}
于 2015-01-22T00:20:27.850 回答
0

您可能还想查看http://angular-ui.github.com/#directives-select2中的 select2 指令

于 2013-02-15T19:07:17.630 回答
0

在我的代码中，我重新计算 ng-change="changeItem()" 上的选择标题

HTML

<div ng-app="myApp" ng-controller="MyCtrl">
    <select ng-options="item.id as item.title for item in items" 
            ng-model="selectedId" ng-change="changeItem()" title="{{myTitle}}">
        <option value="" disabled selected style="display: none;">Select Item</option>                
    </select>
    <div>
        {{selectedId}}        
    </div>
    <div>
        {{myTitle}}        
    </div>
</div>

应用程序.js

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

function MyCtrl($scope) {

    $scope.items = [{
        id: 1,
        title: "Icebox"
    }, {
        id: 2,
        title: "Summer"
    }, {
        id: 3,
        title: "Milestone"
    }];

    $scope.changeItem = function() {
        $scope.myTitle = undefined;
        for(var i=0; i<$scope.items.length; i++){
            if($scope.items[i].id == $scope.selectedId){
                $scope.myTitle = $scope.items[i].title;    
            }
        }    
    }    
}

小提琴

于 2014-09-22T13:51:47.790 回答