点击一个按钮，显示新的HTML元素

Question

 <div> 
     ToDo<br> 
     <input ng-show="add" type="checkbox" >{{val}} 
    </div> 

    <div> 
     <input type="text" ng-model="ToDo"> 
     <input type="button" ng-click="addToDo()" name="btn" placeholder="add todo here" ng-model="add" value="add" /> 
    </div> 

和JavaScript：

var app = angular.module("myapp",[]); 
     app.controller("myctrl",function($scope,$log){ 
      $scope.addToDo = function(){ 
       $scope.val = $scope.ToDo; 
      } 
     }); 

如果我的“添加”按钮，单击，复选框应与texxtbox的文字一起出现。但只有文字显示，没有复选框。我如何显示复选框？

Answer 1

您必须调用控制器中的函数并将某些变量更新为true/false。根据该值并使用ng-if指令，您可以切换HTML元素。

$scope.displayCheckBox = false; 
 
$scope.val = "someRandoValue"; 
 

 
$scope.addToDo = function() { 
 
    $scope.displayCheckBox = true; 
 
};

<div> 
 
    ToDo<br> 
 
    <span ng-if="displayCheckBox"> 
 
    <input type="checkbox" >{{val}} 
 
    </span> 
 
</div>