我想使用angularjs和HTML在按钮点击上显示div我正在学习angularJs。我想设计一个网页，在其中点击“添加”按钮，显示一个div（EmployeeInfoDiv）。当我填充其中的文本框并保存它时，数据应该反映在div（EmpDetTable）中的表中。
这是HTML页面代码：
<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>
控制器代码：
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;
}
}
我不知道这段代码是否正确。我刚尝试过。任何人都可以帮助我。提前致谢。
您的点击是更新EmployeeInfoDiv变量。所以，在ng-show和ng-hide中引用它：
<div ng-hide="EmployeeInfoDiv" class="container body">
...
<div ng-show="EmployeeInfoDiv" class="popover right EmployeeInfo" style="width:1500px;">
你不需要div中的ng-model来完成这项工作。 ng-model="EmployeeInfoDiv"
更新 还有一些问题。最重要的是（至少在发布的代码中）MyApp没有在任何地方定义，并且您的控制器是在全局范围内定义的。所以你需要将你的html更改为：
<div ng-app>
<div ng-controller="EmpDetCtrl">
...
但请注意，这不是推荐的方法。请参阅controllers的角度文档。
这是一个工作演示：http://jsfiddle.net/wittwerj/xrB77/