Inicjowanie selekcji za pomocą AngularJS i powtórzenie ng

127

Próbuję uzyskać pole wyboru, aby rozpocząć od wstępnie wypełnionej opcji przy użyciu polecenia ng-repeat z AngularJS 1.1.5. Zamiast tego wybór zawsze zaczyna się od niczego wybranego. Ma również pustą opcję, której nie chcę. Myślę, że istnieje efekt uboczny, że nic nie zostało wybrane.Inicjowanie selekcji za pomocą AngularJS i powtórzenie ng

Mogę uzyskać to działające przy użyciu opcji ng zamiast ng-repeat, ale chcę użyć ng-repeat dla tego przypadku. Chociaż mój zwężony przykład tego nie pokazuje, ja również chcę ustawić atrybut title każdej opcji, i nie ma sposobu, aby to zrobić używając opcji ng, o ile wiem.

Nie sądzę, że jest to związane z typowym zagadnieniem AngularJs dotyczącym zakresu/prototypowego dziedziczenia. Przynajmniej nie widzę niczego oczywistego podczas inspekcji w Batarangu. Ponadto po wybraniu opcji w menu wyboru przy użyciu interfejsu użytkownika model aktualizuje się poprawnie.

Oto HTML:

<body ng-app ng-controller="AppCtrl"> 
    <div> 
     Operator is: {{filterCondition.operator}} 
    </div> 
    <select ng-model="filterCondition.operator"> 
     <option 
      ng-repeat="operator in operators" 
      value="{{operator.value}}" 
     > 
      {{operator.displayName}} 
     </option> 
    </select> 
</body>

I JavaScript:

function AppCtrl($scope) { 

    $scope.filterCondition={ 
     operator: 'eq' 
    } 

    $scope.operators = [ 
     {value: 'eq', displayName: 'equals'}, 
     {value: 'neq', displayName: 'not equal'} 
    ] 
}

JS Fiddle na to: http://jsfiddle.net/coverbeck/FxM3B/2/

Źródło

2013-09-05 Charles O.

ngOption został stworzony, ponieważ nie było czysty sposób to zrobić z ngRepeat. ngRepeat rozwija się po wybraniu opcji. Czy próbowałeś ustawić ngSelect na swoich opcjach? – TheSharpieOne

Tak! NgSelected działało! Opublikuję zaktualizowany działający JsFiddle. –

Należy zauważyć, że w AngualrJS 1.2 ten kod działa inaczej - nie tworzy nowego pustego elementu

215

OK. Jeśli nie chcesz korzystać z poprawnej metody ng-options, możesz dodać atrybut ng-selected z logiką sprawdzania warunków dla dyrektywy option, aby dokonać wstępnej selekcji.

<select ng-model="filterCondition.operator"> 
    <option ng-selected="{{operator.value == filterCondition.operator}}" 
      ng-repeat="operator in operators" 
      value="{{operator.value}}"> 
     {{operator.displayName}} 
    </option> 
</select>

Working Demo

Źródło

2013-09-06 05:26:34 zsong

OK, wydaje się, że już odpowiedziałeś na twoje pytanie w ten sposób ... – zsong

+37

Dam ci kredyt, ponieważ sam to wymyśliłeś i zrobiłeś pełny przykład. Chociaż nie zgadzam się z twoim komentarzem na temat opcji ng, które są "poprawną drogą". :) Zawsze korzystałem z opcji ng, ale wymagało to zrobienia czegoś, co nie obsługuje opcji ng, tak małe jak jest.Doktor Angular mówi, że możesz także użyć JA-powtórzyć. Dzięki, Charles –

Dzięki, to był łatwy sposób na wyłączenie niektórych opcji. – Dorian

Jak sugeruje trzeba użyć NG-opcje i niestety wierzę ci należy odwołać się do elementu tablicy dla wartości domyślnej (chyba że tablica jest tablicą łańcuchów).

http://jsfiddle.net/FxM3B/3/

javascript:

function AppCtrl($scope) { 


    $scope.operators = [ 
     {value: 'eq', displayName: 'equals'}, 
     {value: 'neq', displayName: 'not equal'} 
    ] 

    $scope.filterCondition={ 
     operator: $scope.operators[0] 
    } 
}

HTML:

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator.value}}</div> 
<select ng-model="filterCondition.operator" ng-options="operator.displayName for operator in operators"> 
</select> 
</body>

Źródło

2013-09-05 22:54:14 shaunhusain

Czy wiesz dlaczego i jesteś pewien? Dokumentacja (http://docs.angularjs.org/api/ng.directive:select) mówi, że musisz używać opcji ng tylko podczas wiązania z wartością inną niż łańcuchowa. Tak jak powiedziałem, chcę użyć atrybutu title i nie ma sposobu, aby to zrobić z opcjami ng. Coś jak

Wierzę, że notatka w dokumentach jest nieco niejasna i faktycznie oznacza, że musiałbyś używać łańcucha znaków dla modelu i mieć tablicę ciągów dla opcji. Jeśli nie masz nic przeciwko temu, co rozumiesz za pomocą atrybutu "tytuł", nie widzę go na W3C http://www.w3schools.com/tags/tag_option.asp i nie mogę sobie przypomnieć, jak go używać. Czy nie mógłbyś po prostu zapisać opisu w obiektach, a następnie nadal pobierać te dane, ponieważ jest to tym, do czego jest teraz przypisany model? – shaunhusain

Na stronie W3C, do której jesteś podłączony, po kliknięciu linku Globalne atrybuty zobaczysz, że atrybut title jest obsługiwany przez element option. Używam atrybutu title tylko po to, aby wyświetlić tekst "tooltip", więc jeśli umieścisz kursor nad opcją, możesz uzyskać większy opis tego, co oznacza ta opcja. To drobiazg, ale byłoby miło mieć, jeśli to możliwe. –

Dla wybierz tag, kątowe zapewnia dyrektywę NG-opcji. Daje to określone ramy do konfiguracji opcji i ustawienia domyślnego. Oto aktualizowane skrzypce używając NG-opcje, które działa zgodnie z oczekiwaniami: http://jsfiddle.net/FxM3B/4/

Updated HTML (kod pozostaje taka sama)

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator}}</div> 
<select ng-model="filterCondition.operator" ng-options="operator.value as operator.displayName for operator in operators"> 
</select> 
</body>

Źródło

2013-09-05 22:57:18

Cześć Jeremy - Próbuję to zrobić bez opcji ng. Tak jak powiedziałem w moim pytaniu i w odpowiedzi na Shaun, chciałbym ustawić atrybut title dla każdej opcji, i nie mogę tego zrobić z opcjami ng, o ile wiem. Dzięki, Charles –

Dzięki TheSharpieOne dla wskazując opcję NG-wybrany. Gdyby to zostało zaksięgowane jako odpowiedź, a nie jako komentarz, zrobiłbym to właściwą odpowiedź.

Oto działający JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/.

Zaktualizowałem również skrzypce, aby użyć atrybutu tytułu, który pominięto w moim oryginalnym wpisie, ponieważ nie było to przyczyną problemu (ale jest to powód, dla którego chcę użyć powtórzenia ng zamiast ng-opcje).

HTML:

<body ng-app ng-controller="AppCtrl"> 
<div>Operator is: {{filterCondition.operator}}</div> 
<select ng-model="filterCondition.operator"> 
    <option ng-repeat="operator in operators" title="{{operator.title}}" ng-selected="{{operator.value == filterCondition.operator}}" value="{{operator.value}}">{{operator.displayName}}</option> 
</select> 
</body>

JS:

function AppCtrl($scope) { 

    $scope.filterCondition={ 
     operator: 'eq' 
    } 

    $scope.operators = [ 
     {value: 'eq', displayName: 'equals', title: 'The equals operator does blah, blah'}, 
     {value: 'neq', displayName: 'not equal', title: 'The not equals operator does yada yada'} 
    ] 
}

Źródło

2013-09-05 23:56:16

Przepraszamy za opublikowanie jako komentarz. Nie chciałem robić przykładu i nie byłem w 100% pewien, czy to zadziała. To było tylko przeczucie. – TheSharpieOne

fakt, że kątowe wstrzykiwanie pusty funkcji elementu do Select jest model obiektowy oprawiony niej domyślnie jest wyposażony w pusty wartości kiedy inicjowany.

Jeśli chcesz wybrać opcję domyślną następnie można prawdopodobnie można ustawić go na zakres w kontrolerze

$scope.filterCondition.operator = "your value here";

Jeśli chcesz pustej opcji zastępczego, to działa na mnie

<select ng-model="filterCondition.operator" ng-options="operator.id as operator.name for operator in operators"> 
    <option value="">Choose Operator</option> 
</select>

Źródło

2015-02-10 06:49:26 Ammadu

To jest dobre, ale kątowe tworzą pustą opcję. Jak tego uniknąć? – MarceloBarbosa

Jeśli używasz md-select i ng-repeat MD-opcję z materiału kątowej ing następnie można dodać do znacznika ng-model-options="{trackBy: '$value.id'}" popiołu MD-select pokazanego na this pen

Kod:

<md-select ng-model="user" style="min-width: 200px;" ng-model-options="{trackBy: '$value.id'}"> 
 
    <md-select-label>{{ user ? user.name : 'Assign to user' }}</md-select-label> 
 
    <md-option ng-value="user" ng-repeat="user in users">{{user.name}}</md-option> 
 
</md-select>

Źródło

2016-07-28 14:49:26

Inicjowanie selekcji za pomocą AngularJS i powtórzenie ng

Odpowiedz

Powiązane problemy