7

ng-optionsでは不可能な <options> タグ自体に title 属性を設定する必要があるため、アプリにはng-optionsを使用できないいくつかのドロップダウンがあります。

タイトルが必要な理由は、IE < 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/のフィドルを更新しました。

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

手動オプションの場合、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 に答える
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 に答える
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>

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

フィドル

于 2014-09-22T13:51:47.790 に答える