JS angolari Seleziona con opzioni manuali

abbiamo alcuni elenchi a discesa nella nostra app che possiamo NON uso NG-opzioni con perché abbiamo bisogno di impostare l'attributo title sui <opzioni> tag stesso, che non è possibile con ng-options.JS angolari Seleziona con opzioni manuali

La ragione per cui abbiamo bisogno il titolo è perché IE < 9 costolette off valori che sono a lungo e sono visibili solo con il titolo (compare al passaggio del mouse dell'elemento)

Ora, per vedere il problema sto guardando il seguente violino di JS.

http://jsfiddle.net/nstuart/nF7eJ/ (Bit 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>

Idealmente il selezionare avrebbe 'test3' selezionato, ma si può vedere che viene impostato su un'opzione vuota invece. Capisco questo dal fatto che il valore di ng-model non è presente nelle opzioni-ng, ma questo perché non ne ho definito uno!

Qualche idea su come ottenere che qualcosa di simile funzioni? Forse è anche possibile aggiungere il titolo alle opzioni generate da ng-options in modo che potremmo usarlo invece?

EDIT

Aggiornato il violino a: http://jsfiddle.net/nstuart/nBphn/2/ come descritto nella risposta qui sotto.

fonte

2013-02-15 nick.stuart

In realtà, basta togliere le parentesi graffe dalla espressione in ng-selezionata e funzionerà:

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

fiddle

fonte

2013-02-15 18:14:41 satchmorun

Gaahhhh! Grazie, è stato così. Ho aggiornato il violino in modo che funzioni. Aggiunge ancora lo strano vuoto

+1 anche questo mi aiuta :) –

<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] dimenticato di passare variabile valore. Aggiornato il violino e la risposta.

fonte

2013-02-15 18:10:04

Date un'occhiata alla mia risposta. 'ngSelected' prende un'espressione come argomento. Quel commento sulla pagina dei documenti non è corretto. Nella tua risposta qui 'checkOption (v.value)' è una stringa che viene valutata da Angular come espressione nell'ambito corrente. Quindi le espressioni vanno bene. – satchmorun

@satchmorun Lo vedo ora, grazie. Sono aggiornato la mia risposta. –

La risposta di satchmorun è accettata in quanto è tecnicamente più corretta. Devi solo lasciare il {{}} e prenderà una funzione o un normale == controllo. Grazie Ben, era nella giusta direzione e avrebbe risolto anche quello. –

Si potrebbe anche voler dare un'occhiata alla direttiva select2 in http://angular-ui.github.com/#directives-select2

fonte

2013-02-15 19:07:17 Emad

Nel mio codice, ho ri-calcolare select titolo sul 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;  
      } 
     }  
    }  
}

Fiddle

fonte

2014-09-22 13:51:47

Per le opzioni manuali, avete solo bisogno di usare ng-model direttiva. Questa direttiva ng-model offre un collegamento dati bidirezionale per l'opzione selezionata.

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

fonte

2015-01-22 00:20:27

JS angolari Seleziona con opzioni manuali

risposta

Problemi correlati