Question

我们的应用中有一些下拉菜单，我们可以不使用 ng-options ，因为我们需要在＆lt; options＆gt;上设置title属性标记本身，这是 ng-options 无法实现的。

我们需要标题的原因是因为IE＆lt; 9砍掉长的值，只有标题可见（显示在元素悬停时）

现在，要看到这个问题我正在看下面的JS小提琴。

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/，如下面的答案中所述。

Answer 1

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

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

fiddle

Answer 2

<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);
}

Fiddle

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

Answer 3

对于手动选项，您只需使用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';
}

Answer 4

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

中的select2指令

Answer 5

在我的代码中，我在ng-change =＆＃34; changeItem（）＆＃34;

上重新计算选择标题

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>

app.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;    
            }
        }    
    }    
}

Fiddle

Angular JS选择手动选项

5 个答案: