javascript 在 angularjs 中隐藏和显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19175522/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hide and Show in angularjs
提问by Ramesh Rajendran
I am new in angularJs .
我是 angularJs 的新手。
This is my bit level view
这是我的位级视图
<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>
and this is my angularjs bit level coding
这是我的 angularjs 位级编码
$scope.DisplayUpdate = "none";
I have one screan for manage student details, i want to show add button when first time at this time hide update button , and when update time to show update button and at this time add button was need to hide .
我有一个管理学生详细信息的屏幕，我想在第一次隐藏更新按钮时显示添加按钮，当更新时间显示更新按钮时，此时需要隐藏添加按钮。
see this line for set to hide and show details in script side using angular js : $scope.DisplayUpdate = "none";
请参阅此行以使用 angular js 在脚本端隐藏和显示详细信息： $scope.DisplayUpdate = "none";
How to i set this value in my button style ?
如何在我的按钮样式中设置这个值？
<form style="display:'?????????'" ng-submit="addTodo()">
<input class="btn-primary" style="display:'?????????'" type="submit" value="add">
</form>
回答by dohaivu
You can use ng-showto hide it
你可以用ng-show它来隐藏它
<form ng-show="DisplayUpdate === 'none'" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="add">
</form>
If you want to remove it from DOM tree, use ng-if
如果要将其从 DOM 树中删除，请使用 ng-if
<form ng-if="DisplayUpdate === 'none'" ng-submit="addTodo()">
<input class="btn-primary" type="submit" value="add">
</form>
回答by ivarni
回答by Ramesh Rajendran
Finally i got it .
最后我得到了它 。
Below is my code :
下面是我的代码：
JS file :
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;
}
});
};
}
and this is my view code
这是我的视图代码
<!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>
I added the ng-show="DisplaySave"and ng-show="DisplayUpdate"in my buttons , and i will pass the values like trueor falsein javascriptusing angularjswhen edit and load time .
我在我的按钮中添加了ng-show="DisplaySave"和ng-show="DisplayUpdate"，并且我将在编辑和加载时间时使用angularjs传递像true或false在javascript 中的值。
Now it's working. I know my code will helps to other person . cheers
现在它正在工作。我知道我的代码会对其他人有所帮助。干杯
