Флажок Angularjs установлен по умолчанию при загрузке и отключен. Выберите список, если он установлен.

noob при переполнении стека. Я работаю над веб-страницей, которая имеет функцию передачи задания. Это позволяет пользователю установить флажок, чтобы отправить задание обратно в офис или выбрать специалиста из списка всех доступных. Мой вопрос заключается в том, как установить флажок, чтобы он был проверен по умолчанию, когда страница загружается и соответственно отключен список выбора. Вот код, который у меня есть на данный момент:

<div ng-app="">
  Send to Office: <input type="checkbox" ng-model="checked" ng-checked="true"><br/>
  <select id="transferTo" ng-disabled="checked">
    <option>Tech1</option>
    <option>Tech2</option>
  </select>
</div>

и вот для него jsfiddle: http://jsfiddle.net/hugmungus/LvHJw/5/

В настоящее время страница загружается с установленным флажком, но список не отключен. Если вы отмените проверку, повторите проверку, список будет отключен.

Спасибо за помощь!

Ответы

Ответ 1

Если вы используете ng-модель, вы не хотите также использовать ng-checked. Вместо этого просто инициализируйте переменную модели true. Обычно вы делаете это в контроллере, который управляет вашей страницей (добавьте ее). В вашей скрипке я просто выполнил инициализацию в атрибуте ng-init для демонстрационных целей.

http://jsfiddle.net/UTULc/

<div ng-app="">
  Send to Office: <input type="checkbox" ng-model="checked" ng-init="checked=true"><br/>
  <select id="transferTo" ng-disabled="checked">
    <option>Tech1</option>
    <option>Tech2</option>
  </select>
</div>

Ответ 2

Сделайте это в контроллере (в качестве синтаксиса контроллера ниже)

контроллер:

vm.question= {};
vm.question.active = true;

форма

<input ng-model="vm.question.active" type="checkbox" id="active" name="active">

Ответ 3

Вам действительно не нужна директива, вы можете ее достичь, используя ng-init и ng-checked. ниже демонстрационной ссылки показано, как установить начальное значение для флажка в angularjs.

демонстрационная ссылка:

<form>
    <div>
      Released<input type="checkbox" ng-model="Released" ng-bind-html="ACR.Released" ng-true-value="true" ng-false-value="false" ng-init='Released=true' ng-checked='true' /> 
      Inactivated<input type="checkbox" ng-model="Inactivated" ng-bind-html="Inactivated" ng-true-value="true" ng-false-value="false" ng-init='Inactivated=false' ng-checked='false' /> 
      Title Changed<input type="checkbox" ng-model="Title" ng-bind-html="Title" ng-true-value="true" ng-false-value="false" ng-init='Title=false' ng-checked='false' />
    </div>
    <br/>
    <div>Released value is  <b>{{Released}}</b></div>
    <br/>
    <div>Inactivated  value is  <b>{{Inactivated}}</b></div>
    <br/>
    <div>Title  value is  <b>{{Title}}</b></div>
    <br/>
  </form>

// Code goes here

  var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {

         });