angularjs - formularios - ng disabled angular 6

Casilla de verificación angular marcada de manera predeterminada al cargar y deshabilita Seleccionar lista cuando está marcada

Question

noob en desbordamiento de pila aquí. Estoy trabajando en una página web que tiene una función de trabajo de transferencia. Esto le permite al usuario marcar una casilla de verificación para enviar el trabajo a la oficina, o seleccionar un técnico de una lista de todos los que están disponibles. Mi pregunta es cómo configurar la casilla de verificación para que esté marcada por defecto cuando se carga la página y tener la lista de selección deshabilitada en consecuencia. Aquí está el código que tengo para él en este momento:

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

y aquí hay un jsfiddle para él: http://jsfiddle.net/hugmungus/LvHJw/5/

Actualmente, la página se carga con la casilla marcada, pero la lista no está deshabilitada. Si lo desmarca y vuelve a verificarlo, la lista queda deshabilitada.

¡Gracias por la ayuda!

Answer 1

Hazlo en el controlador (controlador como sintaxis a continuación)

controlador:

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

formar

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

Answer 2

Realmente no necesita la directiva, puede lograrlo usando ng-init y ng-checked. debajo del enlace de demostración se muestra cómo establecer el valor inicial para la casilla de verificación en angularjs.

enlace de demostración :

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

         });    

Answer 3

Si usa ng-model, no quiere usar también ng-checked. En su lugar, simplemente inicialice la variable del modelo en verdadero. Normalmente harías esto en un controlador que está administrando tu página (agrega uno). En tu violín acabo de hacer la inicialización en un atributo ng-init para fines de demostración.

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>