在angularjs中隐藏和显示答案

【问题标题】：Hide and Show in angularjs在angularjs中隐藏和显示
【发布时间】：2013-10-11 02:46:10
【问题描述】：

我是 angularJs 的新手。

这是我的位级视图

<input type="text" ng-model="todoName" size="30"
            placeholder="Add Your Name">
        <input type="text" ng-model="todoAge" size="30"
            placeholder="Add Your Age">
        <input type="hidden" ng-model="todoId" />
        <form style="display:'?????????'" ng-submit="addTodo()">
            <input class="btn-primary" type="submit" value="add">
        </form>
         <form style="display:'?????????'" ng-submit="addTodo()">
            <input class="btn-primary" type="submit" value="update">
        </form>

这是我的 angularjs 位级编码

$scope.DisplayUpdate = "none";

我有一个管理学生详细信息的屏幕，我想在第一次隐藏更新按钮时显示添加按钮，而当更新时间显示更新按钮时，此时需要隐藏添加按钮。

请参阅此行以使用 Angular js 在脚本端隐藏和显示详细信息：$scope.DisplayUpdate = "none";

如何在我的按钮样式中设置此值？

 <form style="display:'?????????'" ng-submit="addTodo()">
                <input class="btn-primary" style="display:'?????????'" type="submit" value="add">
            </form>

【问题讨论】：

标签： javascript angularjs button styles visible

【解决方案1】：

我终于明白了。

下面是我的代码：

JS 文件：

function TodoCtrl($scope) {

    var value = BindStudentList();
    function BindStudentList() {
        $.ajax({
            url: '/Home/Contact1',
            type: 'GET',
            async: false,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                value = data.data;
            }
        });
        $scope.DisplaySave = true;
        $scope.DisplayUpdate = false;
        return value;
    }

    $scope.addTodo = function () {      
        $.ajax({
            url: '/Home/Index1',
            type: 'GET',
            data: { todoName: $scope.todoName, todoAge: $scope.todoAge },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                value = data.data;
            }
        });
    };

    $scope.Sample = value;
    $scope.remaining = function () {
        var count = 0;
        angular.forEach($scope.Sample, function (todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };

    $scope.editTodo = function (Student) {
        $.ajax({
            url: '/Home/Edit1',
            type: 'GET',
            data: { Id: Student.todo.StudentId },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (data) {
                $scope.todoName = data.data.StudentName;
                $scope.todoAge = data.data.StudentAge;
                $scope.todoId = data.data.StudentId;
                $scope.DisplayUpdate = true;
                $scope.DisplaySave = false;
            }
        });
    };
}

这是我的视图代码

<!doctype html>
<html ng-app>

<body>
    <script src="~/Scripts/angular.js"></script>

    <h2>Student Details</h2>
    <div ng-controller="TodoCtrl">
        <span>{{remaining()}} of {{Sample.length}} remaining</span>
        [ <a href="" ng-click="archive()">archive</a> ]
        <input type="text" ng-model="todoName" size="30"
            placeholder="Add Your Name">
        <input type="text" ng-model="todoAge" size="30"
            placeholder="Add Your Age">
        <input type="hidden" ng-model="todoId" />
        <form ng-show="DisplaySave" ng-submit="addTodo()">
            <input class="btn-primary" type="submit" value="Save">
        </form>
        <form ng-show="DisplayUpdate" ng-submit="addTodo()">
            <input class="btn-primary" type="submit" value="Update">
        </form>
        <br />
        <br />
        <table>
            <tr>
                <td><b>Student Name</b></td>
                <td><b>Student Age</b></td>
            </tr>
            <tr ng-repeat="todo in Sample">
                <td><span>{{todo.StudentName}}</span></td>
                <td><span>{{todo.StudentAge}}</span></td>
                <td>
                    <button value="{{todo.StudentId}}" ng-click="editTodo(this)">Edit</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="~/Scripts/Todo.js"></script>
</body>
</html>

我在按钮中添加了ng-show="DisplaySave" 和ng-show="DisplayUpdate"，我将在javascript 中使用angularjs 传递true 或false 等值编辑和加载时间。

现在它正在工作。我知道我的代码会对其他人有所帮助。干杯

【讨论】：

【解决方案2】：

你可以使用ng-show来隐藏它

<form ng-show="DisplayUpdate === 'none'" ng-submit="addTodo()">
    <input class="btn-primary" type="submit" value="add">
</form>

如果你想从 DOM 树中移除它，使用 ng-if

<form ng-if="DisplayUpdate === 'none'" ng-submit="addTodo()">
    <input class="btn-primary" type="submit" value="add">
</form>

【讨论】：

@RameshRajendran 是的，ng-show ng-if 接受返回布尔值的表达式。您可以传递复杂的表达式或函数。
是的，我完成了，看看我的回答：stackoverflow.com/a/19176872/2218635
您应该提到 ng-if 仅在不稳定的分支中可用，从 1.1.5 及更高版本开始。如果您使用的是早期版本，则需要 angular-ui 来提供它（但不是最新版本的 anguar-ui，因为它是在最新版本的 angular 中引入的，所以它被删除了）。或者，您可以使用 ng-switch 以更详细的方式实现相同的目的。

【解决方案3】：

不要直接设置样式，使用 ng-show 指令，让 Angular 为你处理。

API Docs

【讨论】：

没问题 :) 通常当你尝试以命令式的方式做某事时，你可以使用一个声明性的角度解决方案。