Seçimi AngularJS ve ng-tekrar ile başlatma

133

AngularJS 1.1.5 ile ng-tekrar kullanarak önceden doldurulmuş bir seçenek ile başlamak için seçim kutusunu almaya çalışıyorum. Bunun yerine seçim her zaman hiçbir şey seçilmeden başlar. Ayrıca istemediğim boş bir seçenek var. Hiçbir şeyin seçilmemesinin bir yan etkisi olduğunu düşünüyorum.

Bu çalışmayı ng-repeat yerine ng-options kullanarak alabilirim, ancak bu durumda ng-repeat kullanmak istiyorum. Daraltılmış örneğim bunu göstermese de, her seçeneğin başlık niteliğini de ayarlamak istiyorum ve bunu bildiğim kadarıyla ng-options kullanarak yapmanın bir yolu yok.

Bunun ortak AngularJs kapsamı / prototipsel miras sorunuyla ilgili olduğunu sanmıyorum. En azından Batarang'da teftiş yaparken belirgin bir şey görmüyorum. Ayrıca, kullanıcı arayüzüyle seçimde bir seçenek belirlediğinizde, model doğru şekilde güncellenir.

İşte 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>

Ve JavaScript:

function AppCtrl($scope) {

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

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

JS Fiddle bunun için: http://jsfiddle.net/coverbeck/FxM3B/2/

javascript angularjs

— Charles O.
kaynak

1

ngOption, bunu ngRepeat ile yapmanın temiz bir yolu olmadığı için oluşturuldu. ngSeçenek seçildikten sonra tekrar açılır. Seçeneklerinizi ayarlamayı deneyin

— TheSharpieOne

Evet! NgSelected çalıştı! Güncellenmiş bir JsFiddle yayınlayacağım.

— Charles O.

AngualrJS 1.2'de bu kodun farklı çalıştığı belirtilmelidir - Yeni bir boş <OPTION> öğesi oluşturmaz, ancak liste kutusundaki yalnızca ilk seçeneği seçebilir. Burada

— VitalyB

226

TAMAM. Doğru yolu kullanmak istemiyorsanız , ön seçimin çalışmasını sağlamak için yönerge için bir koşul kontrol mantığıyla öznitelik ng-optionsekleyebilirsiniz .ng-selectedoption

<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

— zs2020
kaynak

37

Kendiniz anladınız ve tam örneği yaptığınızdan beri size kredi vereceğim. Her ne kadar ng-options'un "doğru yol" olduğu hakkındaki yorumunuzu kabul etmiyorum. :) Her zaman ng-options'ı kendim kullandım, ancak ng-options'un desteklemediği bir şey yapmak gerekiyordu, olduğu gibi küçük. Açısal belge de tekrarlayabileceğinizi söylüyor. Teşekkürler, Charles

— Charles O.

Teşekkürler, bazı seçenekleri devre dışı bırakmanın kolay bir yoluydu.

— Dorian

11

ng-options sadece kullanımları size uygun olduğu sürece doğrudur. Seçenek / optgroup alanlarında vb. Ekstra özelliklere / sınıflara ihtiyacınız olabilir

— mystrdat

6

"doğru yol" bazen işe yaramaz (örneğin, seçenek adlarını dolduran dizeleri çevirmek istiyorsanız)

— btk

11

Ben ng seçili ifade {{}} olmadan olması gerektiğini düşünüyorum: ng-seçilmiş = "operator.value == filterCondition.operator"

— mvermand 17:15

35

Seçim etiketi için, açısal ng-seçenekleri yönergesini sağlar. Seçenekleri ayarlamak ve bir varsayılan ayarlamak için size özel bir çerçeve sunar. Beklendiği gibi çalışan ng seçeneklerini kullanarak güncellenmiş keman: http://jsfiddle.net/FxM3B/4/

Güncellenmiş HTML (kod aynı kalır)

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

— Jeremy Likness
kaynak

3

Merhaba Jeremy - Bunu ng seçenekleri olmadan yapmaya çalışıyorum. Sorumda söylediğim gibi ve Shaun'a yanıt olarak, her seçenek için başlık niteliğini ayarlamak istiyorum ve bunu bildiğim kadarıyla ng-options ile yapamam. Teşekkürler, Charles

— Charles O.

9

TheSharpieOne sayesindeSeçilen ng seçeneğini işaretlediği . Eğer bu bir yorum olarak değil, bir cevap olarak gönderilmiş olsaydı, bu doğru cevabı verirdim.

İşte çalışan bir JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/ .

Ayrıca sorunun sebebi olmadığı için orijinal yazımda bıraktığım başlık özniteliğini kullanmak için kemanı güncelledim (ancak ng-options yerine ng-repeat kullanmak istememin nedeni budur) .

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

— Charles O.
kaynak

Yorum olarak yayınladığınız için üzgünüm. Bir örnek yapmak istemedim ve işe yarayacağından% 100 emin değildim. Sadece bir önseziydi.

— TheSharpieOne

9

Köşeli öğenin seçime boş bir seçenek öğesi enjekte etmesi, kendisine varsayılan olarak bağlanan model nesnesinin başlatıldığında boş bir değerle gelmesidir.

Varsayılan bir seçenek seçmek istiyorsanız, muhtemelen denetleyicinin kapsamına ayarlayabilirsiniz.

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

Boş bir seçenek yer tutucusuna sahip olmak istiyorsanız, bu benim için çalışır

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

— Ammadu
kaynak

2

Bu iyi, ama Açısal boş bir seçenek oluşturun. Bundan nasıl kaçınılır?

— MarceloBarbosa

1

Önerildiği gibi ng-seçenekleri kullanmanız gerekir ve ne yazık ki (dizi dizeleri bir dizi olmadığı sürece) varsayılan için dizi eleman başvurmanız gerekir inanıyoruz.

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>

— shaunhusain
kaynak

Nedenini biliyor musun ve emin misin? Belgeler ( docs.angularjs.org/api/ng.directive:select ), dize olmayan bir değere bağlanırken ng seçeneklerini kullanmanız gerektiğini söylüyor. Dediğim gibi title özelliğini kullanmak istiyorum ve bunu ng-options ile yapmanın bir yolu yok. <Option title = "Bu seçimin çok uzun bir açıklaması" ...> Teşekkürler.

— Charles O.

Dokümanlardaki notun biraz belirsiz olduğuna ve aslında model için bir dize kullanmanız ve seçenekler için dizelerden oluşan bir diziye sahip olmanız gerektiği anlamına geliyor. "Başlık" özniteliğini kullanmanın nedeninin bir sakıncası yoksa, W3C'de görmüyorum w3schools.com/tags/tag_option.asp ve gerçekten kullanarak hatırlamıyorum. Açıklamayı nesnelerde saklayabilir ve modelin şu an bağlı olduğu bu verileri almaya devam edebilir misiniz?

— shaunhusain

Bağlandığınız W3C sayfasında, Global Nitelikler bağlantısını tıklatırsanız, title özelliğinin seçenek öğesi tarafından desteklendiğini görürsünüz. Sadece "araç ipucu" metnini görüntülemek için title özniteliğini kullanıyorum, böylece bir seçeneğin üzerine gelirseniz, seçeneğin ne anlama geldiğiyle ilgili daha büyük bir açıklama alabilirsiniz. Bu küçük bir şey, ancak mümkünse sahip olmak güzel olurdu.

— Charles O.

@CharlesO. Senin gibi yapmak istiyorum. Bir nesne ayarlayın (dize olmayan değer) ama aynı zamanda seçenek listesinde bir başlık kullanmak istiyorum. Bunun için bir çözüm var mı. Ben ... bulmak gibi olamaz

— Wilt

1

Açısal malzemeden md-select ve md-option tekrarlayan md-option kullanıyorsanız, bu kalemdeng-model-options="{trackBy: '$value.id'}" gösterilen md-select etiket külüne ekleyebilirsiniz .

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>

Snippet'i genişlet

— Japheth Ongeri - inkalimeva
kaynak