kątowe JS wybierz z ręcznymi opcji

Mamy kilka upadków spadek naszej aplikacji, które możemy NIE użycie NG-opcje z ponieważ musimy ustawić atrybut Tytuł na < opcji sama > znaczników, które nie jest możliwe ng-options.kątowe JS wybierz z ręcznymi opcji

Powodem musimy tytuł jest, ponieważ IE < 9 kotlety off wartości, które są na długo i są widoczne tylko z tytułem (pokazuje się przy aktywowaniu elementu)

Teraz, aby zobaczyć problem Patrzę na następujące skrzypce 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>

Idealnie wybierz musiałby 'TEST3' wybrany, ale widać, że pobiera ustawiony na pusty zamiast opcji. Rozumiem, że wynika to z faktu, że wartość ng-model nie jest obecna w ng-options, ale to dlatego, że jej nie zdefiniowałem!

Jakieś pomysły na to, jak uzyskać coś takiego? Być może nawet możesz dodać tytuł do opcji generowanych przez opcje-ng, abyśmy mogli zamiast tego użyć tego?

EDIT

Aktualizacja skrzypce w: http://jsfiddle.net/nstuart/nBphn/2/ się jak opisano w poniższej odpowiedzi.

Źródło

2013-02-15 nick.stuart

Faktycznie, po prostu usuń nawiasy klamrowe z ekspresją w wybranych ng-i to będzie działać:

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

fiddle

Źródło

2013-02-15 18:14:41 satchmorun

Gaahhhh! Dzięki, to było to. Zaktualizowałem skrzypce, żeby działało. Nadal dodaje dziwne puste

+1 to również pomaga mi :) –

<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] zapomniał przekazać wartości zmiennej. Zaktualizowano skrzypce i odpowiedź.

Źródło

2013-02-15 18:10:04

Spójrz na moją odpowiedź. 'ngSelected' przyjmuje jako swoje argumenty wyrażenie. Ten komentarz na stronie dokumentów jest nieprawidłowy. W twojej odpowiedzi tutaj 'checkOption (v.value)' jest ciągiem, który jest oceniany przez Angular jako wyrażenie w bieżącym zakresie. Więc wyrażenia są w porządku. – satchmorun

@satchmorun Widzę to teraz, dzięki. Zaktualizowałem moją odpowiedź. –

Zaakceptowano odpowiedź satchmoruna, ponieważ jest bardziej technicznie poprawna. Po prostu przestajesz korzystać z {{}} i to będzie funkcja lub regularna kontrola ==. Dzięki choć Ben, był we właściwym kierunku i również to naprawił. –

Można też chcą przyjrzeć dyrektywy select2 w http://angular-ui.github.com/#directives-select2

Źródło

2013-02-15 19:07:17 Emad

W moim kodu, ja ponownie obliczyć wybierz tytuł na nG-zmiany = "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

Źródło

2014-09-22 13:51:47

Dla opcji ręcznej, trzeba tylko użyć dyrektywy ng-model. Dyrektywa ng-model daje dwukierunkowe powiązanie danych dla wybranej opcji.

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

Źródło

2015-01-22 00:20:27

kątowe JS wybierz z ręcznymi opcji

Odpowiedz

Powiązane problemy