web-dev-qa-db-fra.com

La case à cocher Angularjs cochée par défaut lors du chargement et désactive la liste de sélection lorsque cochée

noob sur le débordement de pile ici. Je travaille sur une page Web qui a une fonction de transfert. Cela permet à l'utilisateur de cocher une case pour renvoyer le travail au bureau ou de sélectionner un technicien dans une liste de tous les postes disponibles. Ma question est de savoir comment configurer la case à cocher afin qu'elle soit cochée par défaut lors du chargement de la page et que la liste de sélection soit désactivée en conséquence. Voici le code que j'ai pour le moment:

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

et voici un jsfiddle pour cela: http://jsfiddle.net/hugmungus/LvHJw/5/

Actuellement, la page est chargée avec la case à cocher cochée, mais la liste n'est pas désactivée. Si vous décochez puis revérifiez-le, la liste est désactivée.

Merci pour l'aide!

angularjscheckboxselectlist
47
hugmungus

Si vous utilisez ng-model, vous ne voulez pas également utiliser ng-vérifié. Au lieu de cela, initialisez la variable de modèle à true. Normalement, vous le feriez dans un contrôleur qui gère votre page (ajoutez-en un). Dans votre violon, je viens de faire l'initialisation dans un attribut ng-init à des fins de démonstration.

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>
92
Karen Zilles

Faites-le dans le contrôleur (contrôleur selon la syntaxe ci-dessous)

contrôleur:

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

forme

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

Vous n'avez pas vraiment besoin de la directive, vous pouvez y arriver en utilisant ng-init et ng-vérifié. Le lien ci-dessous montre comment définir la valeur initiale de la case à cocher dans angularjs.

lien démo :

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

         });
0
Joanna