加载时默认选中Angularjs复选框，并在选中时禁用选择列表

Posted 2023-03-05

【中文标题】加载时默认选中Angularjs复选框，并在选中时禁用选择列表

【英文标题】：Angularjs checkbox checked by default on load and disables Select list when checked

【发布时间】：2013-06-26 18:49:12

【问题描述】：

这里的堆栈溢出新手。我正在开发一个具有转移工作功能的网页。这使用户可以选中复选框以将作业发送回办公室，或从所有可用的列表中选择技术人员。我的问题是如何设置复选框，以便在页面加载时默认选中它并相应地禁用选择列表。这是我目前拥有的代码：

<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-model，你不想也使用 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>

【讨论】：

非常感谢，正如我所希望的那样工作。特别感谢您的快速回复并解释如何解决问题。

它对我不起作用，我也尝试过同样的方法：div class= "columns float-left" ng-click="inventory.openColumnSelector();">

状态 ，点击我显示 div 和状态字段必须检查...

@AnitaMehta 去掉模板中的 ng-init。在您的控制器中，设置 scope.inventory.status = true。

@KarlZilles 设置为 true 而不是 1 对我有用 - 谢谢！

你美女@KarenZilles！！！我什至无法想到 ng-init 可以在元素级别使用。

【参考方案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 中设置复选框的初始值。

demo link：

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

         );    

【参考方案4】：

在控制器中执行

$timeout(function()
$scope.checked = true;
, 1);

然后删除 ng-checked。