web-dev-qa-db-ja.com

ロード時にデフォルトでAngularjsチェックボックスがオンになり、オンにすると選択リストが無効になります

ここでスタックオーバーフローのnoob。私は、転送ジョブ機能を持つWebページで作業しています。これにより、ユーザーはチェックボックスをオンにしてジョブをオフィスに送り返すか、利用可能なすべてのリストから技術者を選択できます。私の質問は、ページがロードされたときにデフォルトでチェックボックスがオンになり、それに応じて選択リストが無効になるようにチェックボックスを設定する方法です。現時点で私が持っているコードは次のとおりです。

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

現在、チェックボックスをオンにしてページが読み込まれますが、リストは無効になっていません。チェックを外してから再度チェックすると、リストは無効になります。

助けてくれてありがとう！

angularjscheckboxselectlist
47
hugmungus

Ng-modelを使用する場合、ng-checkedも使用したくありません。代わりに、モデル変数をtrueに初期化するだけです。 通常、これはページを管理しているコントローラーで行います（1つ追加します）。フィドルで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>
92
Karen Zilles

コントローラーで実行します（以下の構文としてコントローラー）

コントローラー：

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

フォーム

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

ディレクティブは実際には必要ありません。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) {

         });
0
Joanna