角JS選擇與手動選項

我們已經在我們的應用中的一些下拉菜單，我們可以不使用NG選項用，因爲我們需要設置標題屬性的<選項>標籤本身，這是不可能的ng-options。角JS選擇與手動選項

我們需要的標題是因爲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選項生成的選項，所以我們可以使用它呢？

編輯

更新了小提琴的：http://jsfiddle.net/nstuart/nBphn/2/如下面的答案描述。

來源

2013-02-15 nick.stuart

其實只是刪除從表達在大括號NG選擇，它會工作：

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

fiddle

來源

2013-02-15 18:14:41 satchmorun

Gaahhhh！謝謝，就是這樣。我已經更新了小提琴，所以它的工作。它仍然在頂部添加了奇怪的空

+1這也幫助我:) – 2013-04-25 15:35:13

<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]忘記傳遞值可變。更新小提琴和答案。

來源

2013-02-15 18:10:04

看看我的答案。 'ngSelected'接受一個表達式作爲它的參數。對文檔頁面的評論不正確。在你的答案中，checkOption（v.value）是一個字符串，它被Angular評估爲當前作用域中的一個表達式。所以表達式就好了。 – satchmorun 2013-02-15 18:16:26

@satchmorun我明白了，謝謝。我更新了我的答案。 – 2013-02-15 18:20:16

接受satchmorun的答案，因爲它在技術上更加正確。您只需離開{{}}，它將執行函數或常規==檢查。不過謝謝Ben，這個方向是正確的，並且已經修復了。 – 2013-02-15 18:22:34

你也可能想在http://angular-ui.github.com/#directives-select2

看看選擇2指令

來源

2013-02-15 19:07:17 Emad

在我的代碼，我重新計算的NG-變化選擇標題= 「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;  
      } 
     }  
    }  
}

Fiddle

來源

2014-09-22 13:51:47

對於手動選項，你只需要使用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-22 00:20:27

角JS選擇與手動選項

回答

相關問題