AngularJS Bootstrap
-
-
指令解析
AngularJS 指令 描述 <body ng-app 为 <body> 元素定义一个应用程序 <body ng-controller 为 <body> 元素定义一个控制器 <tr ng-repeat 循环 users 对象数组,每个 user 对象放在 <tr> 元素中。 <h3 ng-show 如果 edit = true 显示 <h3> 元素 <h3 ng-hide 如果 edit = true 隐藏 <h3> 元素 <input ng-model 为应用程序绑定 <input> 元素 <button ng-disabled 如果发生错误或者 incomplete = true 禁用 <button> 元素 -
Bootstrap 类解析
元素 类名 描述 <div> container 内容容器 <table> table 表格 <table> table-striped 带条纹背景的表格 <button> btn 按钮 <button> btn-success 成功按钮 <span> glyphicon 字形图标 <span> glyphicon-pencil 铅笔图标 <span> glyphicon-user 用户图标 <span> glyphicon-save 保存图标 <form> form-horizontal 表单水平线 <div> form-group 表单组 <label> control-label 控制器标签 <label> col-sm-2 占间隔 2 列 <div> col-sm-10 占间隔 10 列 -
JavaScript 代码
myUsers.js -
JavaScript 代码解析
AngularJS 指令 描述 $scope.fName 模型变量 (用户名) $scope.lName 模型变量 (用户姓) $scope.passw1 模型变量 (用户密码 1) $scope.passw2 模型变量 (用户密码 2) $scope.users 模型变量 (用户的数组) $scope.edit 当用户点击创建用户时设置为true。 $scope.error 如果 passw1 不等于 passw2 设置为 true $scope.incomplete 如果每个字段都为空(length = 0)设置为 true $scope.editUser 设置模型变量 $scope.watch 监控模型变量 $scope.test 验证模型变量的错误和完整性 有关更多的 Bootstrap 类样式,请阅读我们的 Bootstrap 教程