Javascript 如何在angularjs中隐藏和显示HTML元素？_Javascript_Jquery_Html_Angularjs

Javascript 如何在angularjs中隐藏和显示HTML元素？

javascript jquery html angularjs

Javascript 如何在angularjs中隐藏和显示HTML元素？,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我有一张表格，表格中的每一行都有一个任务。在每一行中都有一个由一个按钮控制的状态。每个任务的初始状态将显示为正在进行，按钮文本显示为标记完成，但当单击按钮时，它会将任务状态更改为已完成，并将按钮文本更改为标记正在进行。如果将来我们想更改“完成”任务的状态，那么我们可以通过“标记进行中”按钮更改状态在这个现场演示中 Index.html <!DOCTYPE html> <html> <head> <title>ToDo API Client

我有一张表格，表格中的每一行都有一个任务。在每一行中都有一个由一个按钮控制的状态。每个任务的初始状态将显示为正在进行，按钮文本显示为标记完成，但当单击按钮时，它会将任务状态更改为已完成，并将按钮文本更改为标记正在进行。如果将来我们想更改“完成”任务的状态，那么我们可以通过“标记进行中”按钮更改状态

在这个现场演示中

Index.html

<!DOCTYPE html>
<html>

<head>
<title>ToDo API Client Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

</head>

<body ng-app="myApp" ng-controller="tasksCtrl">
  <div class="navbar">
        <div class="navbar-inner">
            <a class="brand" href="#">ToDo API Client Demo</a>
        </div>
  </div>
  <div>

         <table class="table table-striped">
             <tr><td style="width: 1px;"></td><td><b>Task</b></td><td><b>Options</b></td></tr>
            <tr ng-repeat="task in tasks">
                <td>
                    <span data-bind="visible: done" class="label label-success">Done</span>
                    <span data-bind="visible: !done()" class="label label-important">In Progress</span>
                </td>
            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
                        <td>  <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a></td>
                <td>  <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a></td>

                <td>
                    <span data-bind="visible: done">
                          <button data-bind="click: $parent.markInProgress" class="btn">Mark In Progress</button>
                    </span>
                </td>
                        <td>
                     <span data-bind="visible: !done()">
                          <button data-bind="click: $parent.markDone" class="btn">Mark Done</button>
                     </span>
                </td>
            </tr>
         </table>

            <a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
  </div>
  <div id="modal" role="dialog" class="modal hide fade">
        <div>
            <div class="modal-header">
                Task Dialog
            </div>
            <div class="modal-body">
                <label for="txtName"></label> 
                <input type="text"  ng-model="selectedTask.title" />
                <input type="text"  ng-model="selectedTask.description" />
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
            </div>
        </div>
   </div>

   <div id="add" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="addDialogLabel">Add Task</h3>
        </div>
        <div class="modal-body">
            <form class="form-horizontal">
                <div class="control-group">
                    <label class="control-label" for="inputTask">Task</label>
                    <div class="controls">
                        <input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;"><br />
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="inputDescription">Description</label>
                    <div class="controls">
                        <input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;">
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer"> 
            <button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>

            <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        </div>
    </div>


   <script>
    var app = angular.module('myApp', []);
    app.controller('tasksCtrl', function($scope, $http) {
        //$http.get("data.json")
        $http.get("/todo/api/v1.0/tasks")
        .success(function(response) {
          console.log(response.tasks)
          $scope.tasks = response.tasks;
        });

        $scope.editTask=function(task) {
            $scope.selectedTask = task;
        };
        $scope.removeRow = function (task) {
            $scope.tasks.splice(task, 1);
        };
        $scope.addNewTask=function(){
            //$scope.tasks.push({title :$scope.task1,description: $scope.description1});
            $scope.tasks.push({title : $scope.task1, description : $scope.description1});
            $scope.task1='';
            $scope.description1='';
           //   $scope.tasks.push('dhsh');
        };
    });
    /*
    app.controller('addNewTaskCtrl', ['$scope', function($scope){
        $scope.addNewTask=function(){
            var task;
        }
    }]);*/

  </script>
</body>

</html>


TODOAPI客户端演示
任务选项
多恩
进行中
{{task.title}}
{{task.description}
编辑
删除
标记进行中
标记完成
添加任务
任务对话框
好啊
×
添加任务
任务


描述
添加任务
取消
var-app=angular.module（'myApp'，[]）；
app.controller（'tasksCtrl'，函数（$scope，$http）{
//$http.get（“data.json”）
$http.get（“/todo/api/v1.0/tasks”）
.成功（功能（响应）{
console.log（response.tasks）
$scope.tasks=response.tasks；
});
$scope.editTask=函数（任务）{
$scope.selectedTask=任务；
};
$scope.removeRow=功能（任务）{
$scope.tasks.splice（任务1）；
};
$scope.addNewTask=函数（）{
//$scope.tasks.push（{title:$scope.task1，description:$scope.description1}）；
$scope.tasks.push（{title:$scope.task1，description:$scope.description1}）；
$scope.task1=''；
$scope.description1=''；
//$scope.tasks.push（'dhsh'）；
};
});
/*
app.controller（'addNewTaskCtrl'，['$scope'，函数（$scope）{
$scope.addNewTask=函数（）{
var任务；
}
}]);*/

我不太确定我是否理解您想要做什么，但我认为您可能正在寻找ngHide允许根据“ngHide”值的设置隐藏元素

例如：

<!-- when $scope.buttonStatus is set to true -->
<div ng-hide="$scope.buttonStatus" class="ng-hide"></div>
<!-- The element would be hidden -->


<!-- when $scope.buttonStatus's value is changed! -->
<div ng-hide="$scope.buttonStatus"></div>
<!-- The element would now be visible -->

让我知道如果你想更多的澄清！我知道这很简单：）

尝试使用

ng show

和

ng hide

指令

这是最新消息。

<table class="table table-striped">
    <tbody>
        <tr>
            <td style="width: 1px;"></td>
            <td>
                <b>Task</b>
            </td>
            <td>
                <b>Options</b>
            </td>
        </tr>
        <tr ng-repeat="task in tasks">
            <td>
                <span ng-show="done" class="label label-success">Done</span>
                <span ng-hide="done" class="label label-important">In Progress</span>
            </td>
            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
            <td>
                <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
            </td>
            <td>
                <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
            </td>
            <td ng-show="done">
                <span>
                    <button ng-click="done = !done" class="btn">Mark In Progress</button>
                </span>
            </td>
            <td ng-hide="done">
                <span>
                    <button ng-click="done = !done" class="btn">Mark Done</button>
                </span>
            </td>
        </tr>
    </tbody>
</table>

例如

<table class="table table-striped">
    <tbody>
        <tr>
            <td style="width: 1px;"></td>
            <td>
                <b>Task</b>
            </td>
            <td>
                <b>Options</b>
            </td>
        </tr>
        <tr ng-repeat="task in tasks">
            <td>
                <span ng-show="done" class="label label-success">Done</span>
                <span ng-hide="done" class="label label-important">In Progress</span>
            </td>
            <td>{{task.title}}</td>
            <td>{{task.description}}</td>
            <td>
                <a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
            </td>
            <td>
                <a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
            </td>
            <td ng-show="done">
                <span>
                    <button ng-click="done = !done" class="btn">Mark In Progress</button>
                </span>
            </td>
            <td ng-hide="done">
                <span>
                    <button ng-click="done = !done" class="btn">Mark Done</button>
                </span>
            </td>
        </tr>
    </tbody>
</table>


任务
选择权
多恩
进行中
{{task.title}}
{{task.description}
编辑
删除
标记进行中
标记完成

希望能有帮助