Ініціалізація вибору за допомогою AngularJS та ng-повтору

133

Я намагаюся отримати поле вибору, щоб почати з попередньо заповненої опції, використовуючи ng-повтор із AngularJS 1.1.5. Натомість вибір завжди починається з нічого обраного. У нього також є порожній варіант, якого я не хочу. Я думаю, що є побічний ефект, коли нічого не вибирають.

Я можу це зробити за допомогою ng-options замість ng-повтору, але я хочу використовувати ng-повтор для цього випадку. Хоча мій звужений приклад не показує цього, я також хочу встановити атрибут заголовка кожної опції, і немає можливості зробити це за допомогою ng-опцій, наскільки я знаю.

Я не думаю, що це пов’язано із загальною проблематикою / прототипічною спадщиною AngularJs. Принаймні, я не бачу нічого очевидного при огляді в Батаранге. Крім того, коли ви вибираєте опцію у виборі за допомогою інтерфейсу, модель робить оновлення правильно.

Ось 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>

І JavaScript:

function AppCtrl($scope) {

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

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

JS Fiddle для цього: http://jsfiddle.net/coverbeck/FxM3B/2/

javascript angularjs

— Чарльз О.
джерело

1

ngOption створена, оскільки не було чистого способу зробити це за допомогою ngRepeat. ngRepeat знімається після вибору параметра. Ви спробували встановити ngSelect на свої параметри

— TheSharpieOne

Так! Вибрані ng працювали! Я опублікую оновлений робочий JsFiddle.

— Чарльз О.

Слід зазначити, що в AngualrJS 1.2 цей код працює інакше - він не створює новий порожній елемент <OPTION>, однак він може лише вибрати перший варіант у списку. Ви можете побачити його тут

— VitalyB

226

ГАРАЗД. Якщо ви не хочете використовувати правильний спосіб ng-options, ви можете додати ng-selectedатрибут із логікою перевірки умови для optionдирективи, щоб зробити роботу попереднього вибору.

<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
джерело

37

Я дам вам кредит, оскільки ви зрозуміли це самостійно і зробили повний приклад. Хоча я не згоден з вашим коментарем щодо того, що ng-параметри є "правильним способом". :) Я завжди сам використовував ng-параметри, але для цього потрібно робити щось, що ng-параметри не підтримують, як це мало. І Angular doc каже, що ви можете також скористатися ng-повтором. Спасибі, Чарльз

— Чарльз О.

Дякую, це був простий спосіб відключити деякі параметри.

— Доріан

11

ng-параметри є правильними лише до тих пір, поки його шаблони використання відповідають вашим. Можливо, вам знадобляться додаткові атрибути / класи в полях опцій / optgroup тощо.

— mystrdat

6

"правильний спосіб" іноді не працює (наприклад, якщо ви хочете перекласти рядки, які заповнюють назви опцій)

— btk

11

Я думаю, що вибране ng вираз має бути без {{}}: ng-selected = "operator.value == filterCondition.operator"

— mvermand

35

Для вибору тегу angular надає директиву ng-options. Це дає вам конкретні рамки для налаштування параметрів та встановлення за замовчуванням. Ось оновлена скрипка з використанням ng-параметрів, яка працює як очікується: http://jsfiddle.net/FxM3B/4/

Оновлений HTML (код залишається тим самим)

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

— Джеремі Лікнесс
джерело

3

Привіт, Джеремі - я намагаюся зробити це без ng-варіантів. Як я вже говорив у своєму запитанні та у відповідь на Шон, я хотів би встановити атрибут заголовка для кожного варіанту, і я не можу цього робити з ng-варіантами, наскільки я знаю. Спасибі, Чарльз

— Чарльз О.

9

Дякуємо TheSharpieOne, що вказав на ng-обраний варіант. Якби це було розміщено як відповідь, а не як коментар, я зробив би це правильним.

Ось робочий JSFiddle: http://jsfiddle.net/coverbeck/FxM3B/5/ .

Я також оновив скрипку, щоб використовувати атрибут title, який я залишив у своєму початковому дописі, оскільки це не було причиною проблеми (але це причина, чому я хочу використовувати ng-повтор замість ng-параметрів) .

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

— Чарльз О.
джерело

Вибачте за публікацію як коментар. Мені не здавалось робити приклад, і я не був на 100% впевнений, що це спрацює. Це була просто придумка.

— TheSharpieOne

9

Справа в тому, що кутовий вводить порожній елемент опції до вибору - це те, що об'єкт моделі, прив'язаний до нього за замовчуванням, надходить із порожнім значенням при ініціалізації.

Якщо ви хочете вибрати параметр за замовчуванням, ви, ймовірно, можете встановити його на області застосування в контролері

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

Якщо ви хочете порожній заповнювач опції, це працює для мене

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

— Аммаду
джерело

2

Це добре, але кутовий створити порожній варіант. Як цього уникнути?

— MarceloBarbosa

1

Як було запропоновано, вам потрібно використовувати ng-options, і, на жаль, я вважаю, що вам потрібно посилатись на елемент масиву за замовчуванням (якщо тільки масив не є масивом рядків).

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>

— Шонхусайн
джерело

Ви знаєте, чому і ви впевнені? Документація ( docs.angularjs.org/api/ng.directive:select ) говорить, що вам потрібно використовувати лише ng-параметри під час прив’язки до не рядкового значення. Як я вже сказав, я хочу використовувати атрибут title, і немає ніякого способу зробити це з ng-параметрами. Щось на зразок <option title = "Дуже довгий опис цього вибору" ...> Дякую.

— Чарльз О.

Я вважаю, що примітка в документах дещо незрозуміла і насправді означає, що вам доведеться використовувати рядок для моделі та мати масив рядків для параметрів. Якщо ви не заперечуєте, що міркує про використання атрибута "title", я не бачу його на W3C w3schools.com/tags/tag_option.asp і не можу згадати, як його реально використовувати. Не могли б ви просто зберегти опис в об’єктах, а потім все-таки отримати ці дані, оскільки саме тепер це зобов'язана модель?

— shaunhusain

На сторінці W3C, на яку ви посилаєтесь, якщо натиснути посилання Global Attributes, ви побачите, що атрибут заголовка підтримується елементом опції. Я використовую атрибут заголовка просто для відображення тексту "підказки", так що якщо ви наведіть курсор на варіант, ви зможете отримати більш детальний опис того, що він означає. Це невелика річ, але було б добре, якщо це можливо.

— Чарльз О.

@CharlesO. Я хочу зробити саме так, як ти. Встановіть об'єкт (не рядкове значення), але я також хочу використовувати заголовок у списку параметрів. Чи є для цього рішення. Я не можу його знайти ...

— Wilt

1

Якщо ви використовуєте md-select та ng-повторення md-опції з кутового матеріалу, тоді ви можете додати ng-model-options="{trackBy: '$value.id'}"попіл md-select тега, показаний у цій ручці

Код:

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

Розгорніть фрагмент

— Яфет Онгері - інкалімева
джерело