显示在使用angularjs和HTML按钮点击一个div [英] show a div on a button click using angularjs and HTML
问题描述
我要显示使用angularjs和HTML按钮点击一个div
我学习angularJs。
我想设计一个网页，其中上点击添加按钮的div（EmployeeInfoDiv）所示。
当我填写它的文本框和保存数据应股利（EmpDetTable）内表反映。
I want to show a div on a button click using angularjs and HTML I am learning angularJs. I want to design a webpage in which on click of 'Add' button a div(EmployeeInfoDiv) is shown. When I fill the textboxes in it and save it the data should reflect in table within the div(EmpDetTable).
下面是HTML页面code：
Here is the HTML page code:
<body ng-app="MyApp">
<div ng-controller="EmpDetCtrl">
<div ng-model="EmpDetTable" class="container body" ng-hide="addEmp">
<label class="TabHeadings">Employee Details</label>
<div class="EmployeeInfo">
<table ng-model="Employee" border="1">
<thead><tr><th>Name</th><th>Designation</th><th>Salary</th></tr></thead>
<tbody>
<tr ng-repeat="emp in employees">
<td>{{emp.name}}</td>
<td>{{emp.desg}}</td>
</tr>
</tbody>
</table>
<button ng-model="AddEmp" ng-click="ShowAddEmployee()">Add</button>
</div>
</div>
<div ng-model="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;" ng-show="addEmp" >
<label class="TabHeadings" style="width:830px;">Employee Details</label>
<div class="EmployeeInfo">
<table>
<tr><td><label class="table_label">Name:</label></td><td><input type="text" ng-model="name" class="textbox"/></td>
<td><label class="table_label">Designation:</label></td><td><input type="text" ng-model="desg" class="textbox"/></td>
</tr>
</table>
<div ng-model="botton_container">
<button ng-model="save" class="save_buttons" ng-click="SaveData();">Save</button>
<button ng-model="cancel" class="cancel_buttons" ng-click="ShowViewEmployee();">Cancel</button>
</div>
</div>
</div>
</div>
</body>
控制器code：
Controller Code:
function EmpDetCtrl($scope) {
$scope.employees = [
{ name: 'A',desg: 'C'}
];
$scope.addNew = function () {
$scope.employees.push({
name: $scope.name,desg: $scope.desg
});
}
$scope.ShowAddEmployee= function () {
return $scope.EmployeeInfoDiv=true;
}
$scope.ShowViewEmployee=function () {
return $scope.EmployeeInfoDiv = false;
}
}
我不知道这code是否正确与否。
我刚刚试了一下。
任何人都可以请帮助我。
先谢谢了。
I don't know whether this code is correct or not. I just tried it. Can anyone please help me out. Thanks in advance.
推荐答案
您NG-点击正在更新EmployeeInfoDiv变量。因此，参考在NG-秀和NG-隐藏：
Your ng-click is updating the EmployeeInfoDiv variable. So, reference that in ng-show and ng-hide:
<div ng-hide="EmployeeInfoDiv" class="container body">
...
<div ng-show="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;">
您不需要NG-模型，股利，使这项工作。 NG-模式=EmployeeInfoDiv
You do not need ng-model in the div to make that work.
ng-model="EmployeeInfoDiv"
更新结果
一些更多的问题。最重要的是（至少在code贴）MyApp的是没有在任何地方定义，你的控制器在全球范围内定义。所以，你需要你的HTML更改为：
Update
A few more issues. Most important is that (at least in the code posted) MyApp isn't defined anywhere, and your controller is defined on the global scope. So you need to change your html to:
<div ng-app>
<div ng-controller="EmpDetCtrl">
...
但是，请注意，这不是推荐的方法。请参阅控制器角文档。
下面是一个工作演示： http://jsfiddle.net/wittwerj/xrB77/
Here is a working demo: http://jsfiddle.net/wittwerj/xrB77/
这篇关于显示在使用angularjs和HTML按钮点击一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
