Default option in select не работает с использованием AngularJS

Я следую учебнику AngularJS, и я хотел подтвердить свою форму. Я решил добавить параметр по умолчанию к элементу select.Default option in select не работает с использованием AngularJS

Однако, даже после добавления selected="", браузер не будет показывать его по умолчанию.

Я пробовал это без AngularJS, и он отлично работает, поэтому я предполагаю, что скрипт что-то блокирует.

Как определить параметр по умолчанию для моего элемента select?

PS: Я использую Google Chrome Версия 44.0.2403.157 м

var controllers = angular.module('formsApp.Controllers', []); 
 
controllers.controller('todoCtrl', function($scope) { 
 
    $scope.todoList = [{ 
 
    action: 'Get groceries', 
 
    complete: false 
 
    }, { 
 
    action: 'Call plumber', 
 
    complete: false 
 
    }, { 
 
    action: 'Buy running shoes', 
 
    complete: true 
 
    }, { 
 
    action: 'Buy flowers', 
 
    complete: false 
 
    }, { 
 
    action: 'Call family', 
 
    complete: false 
 
    }]; 
 
    $scope.addNewItem = function(newItem) { 
 
    $scope.todoList.push({ 
 
     action: newItem.action + ' (' + newItem.location + ')', 
 
     complete: false 
 
    }); 
 
    }; 
 
}); 
 

 
var app = angular.module('formsApp', ['formsApp.Controllers']);

form input.ng-invalid.ng-dirty { 
 
    background-color: lightpink; 
 
}

<!DOCTYPE html> 
 
<html data-ng-app="formsApp"> 
 

 
<head> 
 
    <title>Forms</title> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="todoPanel" class="panel" data-ng-controller="todoCtrl"> 
 
    <h3 class="panel-header"> 
 
\t \t   To Do List 
 
\t \t   <span class="label label-info"> 
 
\t \t \t   {{(todoList | filter: {complete: false}).length }} 
 
\t \t   </span> 
 
\t   </h3> 
 
    <div class="row"> 
 
     <div class="col-xs-4"> 
 
     <div class="well"> 
 
      <form name="todoForm" novalidate data-ng-submit="addNewItem(newTodo)"> 
 
      <div class="form-group row"> 
 
       <label for="actionText">Action:</label> 
 
       <input type="text" id="actionText" class="form-control" data-ng-model="newTodo.action" required="" /> 
 
      </div> 
 
      <div class="form-group row"> 
 
       <label for="actionLocation">Location:</label> 
 
       <select id="actionLocation" class="form-control" data-ng-model="newTodo.location" required=""> 
 
       <option selected="">Home</option> 
 
       <option>Office</option> 
 
       <option>Mall</option> 
 
       </select> 
 
      </div> 
 
      <button type="submit" class="btn btn-primary btn-block" data-ng-disabled="todoForm.$invalid"> 
 
       Add 
 
      </button> 
 
      </form> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-8"> 
 
     <table class="table"> 
 
      <thead> 
 
      <tr> 
 
       <th>#</th> 
 
       <th>Action</th> 
 
       <th>Done</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      <tr data-ng-repeat="item in todoList"> 
 
       <td> 
 
       {{$index + 1}} 
 
       </td> 
 
       <td> 
 
       {{item.action}} 
 
       </td> 
 
       <td> 
 
       <input type="checkbox" data-ng-model="item.complete" /> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-08-25 Matias Cicero

Я думаю, что проблема в том, что модель не определена (newTodo.location), поэтому AngularJS не знает, какую опцию выбрать. Кроме того, ваши параметры не имеют значения, поэтому я не уверен, как вы хотите заполнить модель. – Sphaso

Но атрибут 'selected' не должен иметь ничего общего с AngularJS, правильно? Я имею в виду, что это что-то из HTML5, он не должен проверять мою область AngularJS вообще –

@Sphaso. Что вы подразумеваете под вариантами, не имеющими значения? Я новичок в этой теме, но не являются значениями «Главная», «Офис» и «Молл»? –

Из направляющей dev для ngSelected;

Спецификация HTML не требует, чтобы браузеры сохраняли значения логических атрибутов , таких как выбранные. (Их наличие означает true, и их отсутствие означает false.) Если мы помещаем выражение интерполяции Angular в такой атрибут, тогда информация привязки будет потеряна, когда браузер удалит этот атрибут. ngВыбранная директива решает эту проблему для выбранного атрибута. Эта дополнительная директива не удаляется браузером и поэтому обеспечивает постоянное надежное место для хранения информации привязки.

источник

2015-08-25 14:38:29

В контроллере добавить другое свойство и ссылаться на него оттуда:

{ 
    action: 'Call family', 
    complete: false, 
    selected: 'selected' 
    }]; 

{ 
    action: 'Call family', 
    complete: false, 
    selected: '' 

    }];

источник

2015-08-25 14:17:57

Правильно ли это? Должен ли контроллер знать, какой элемент выбран? Разве это не ответственность взгляда? –

Я думаю, все зависит от подхода. Если это статическое решение или даже если оно определено динамически, я не вижу проблемы с его использованием в качестве переменной для принятия решений. На самом деле это не отличается от использования имени переменной в методе поиска/фильтрации. –

Default option in select не работает с использованием AngularJS

ответ

Смежные вопросы