AngularJSのチェックボックスをオンにしたときのチェックボックスをオフにする

Question

私は初心者で、何をしているのかを理解するためにいくつかのjavascriptで遊びたいと思っています。 AngularJSのウェブサイトでこの基本的な「todo list」スクリプトを見つけて、それを使い始めました。チェックボックスをオンにするとmsgが追加されましたが、チェックを外すと同じメッセージが表示されます。したがって、最良の選択肢は、チェックされているときにチェックを外すことができないことです。私はかなりの時間を探しましたが、正解を見つけることができませんでした。たぶんあなたの中には、それをどうやって行うのか知っている人もいるでしょ

ありがとうございます！ここで

は私のコード HTMLです：

 <div ng-controller="TodoListController as todoList"> 
     <span>Nog {{todoList.remaining()}} van de {{todoList.todos.length}} te gaan!</span> 
     <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]--> 
     <ul class="unstyled"> 
      <li ng-repeat="todo in todoList.todos"> 
      <label class="checkbox"> 
       <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
      </label> 
      </li> 
     </ul> 
     </div> <!--einde ng-controller --> 

AngularJS

angular.module('todoApp', []) 
.controller('TodoListController', function() { 
var todoList = this; 
todoList.todos = [ 
    {text:'Leer HTML5', done:true}, 
    {text:'Leer CSS3', done:true}, 
    {text:'Leer Javascript', done:false}, 
    ]; 


todoList.remaining = function() { 
    var count = 0; 
    angular.forEach(todoList.todos, function(todo) { 
    count += todo.done ? 0 : 1; 
    }); 
    return count; 
}; 

todoList.archive = function() { 
    var oldTodos = todoList.todos; 
    todoList.todos = []; 
    angular.forEach(oldTodos, function(todo) { 
    if (!todo.done) todoList.todos.push(todo); 
    }); 
}; 
}); 

Answer 1

は確かに動作します。..変更してみてください：

<input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done"> 

<input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done"> 

0に

Answer 2

ここに問題のコードがあります。

var app = angular.module('myApp', []);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    
 
    
 
<div ng-app="myApp"> 
 
<input type="checkbox" ng-init="disable=false" ng-model="disable" ng-disabled="disable">Check once and it will be locked<br><br> 
 
</div>

Answer 3

ngDisabledディレクティブのように使用します。だから、あなたはそれがチェックされている場合、チェックボックスを無効にしたい

<input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done"> 

ビュー

<div ng-app="app" ng-controller="DateController as vm"> 
    <div> 
     <span>Nog {{vm.remaining()}} van de {{vm.todos.length}} te gaan!</span> 
     <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]--> 
     <ul class="unstyled"> 
      <li ng-repeat="todo in vm.todos"> 
      <label class="checkbox"> 
       <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done"> 
       <span class="done-{{todo.done}}">{{todo.text}}</span> 
      </label> 
      </li> 
     </ul> 
     </div> <!--einde ng-controller --> 
</div>