AngularJS Bootstrap

最新推荐文章于 2023-06-04 10:21:53 发布
最新推荐文章于 2023-06-04 10:21:53 发布
阅读量268 收藏 1
点赞数
分类专栏： angularjs 文章标签： angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hsl0530hsl/article/details/77937458
版权

AngularJS 与 Bootstrap 相结合使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS Bootstrap</title>
    <link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

    <script src="../js/jquery-2.1.3.min.js"></script>
    <script src="../js/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="userCtrl">

<div class="container">

    <h3>Users</h3>

    <table class="table table-striped">
        <thead>
        <tr>
            <th>编辑</th>
            <th>名</th>
            <th>姓</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="user in users">
            <td>
                <button class="btn" ng-click="editUser(user.id)">
                    <span class="glyphicon glyphicon-pencil"></span>编辑
                </button>
            </td>
            <td>{{ user.fName }}</td>
            <td>{{ user.lName }}</td>
        </tr>
        </tbody>
    </table>

    <hr>
    <button class="btn btn-success" ng-click="editUser('new')">
        <span class="glyphicon glyphicon-user"></span>创建新用户
    </button>
    <hr>

    <h3 ng-show="edit">创建新用户:</h3>
    <h3 ng-hide="edit">编辑用户:</h3>

    <form class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label">名:</label>
            <div class="col-sm-10">
                <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">姓:</label>
            <div class="col-sm-10">
                <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码:</label>
            <div class="col-sm-10">
                <input type="password" ng-model="passw1" placeholder="密码">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">重复密码:</label>
            <div class="col-sm-10">
                <input type="password" ng-model="passw2" placeholder="重复密码">
            </div>
        </div>
    </form>

    <hr>
    <button class="btn btn-success" ng-disabled="error || incomplete">
        <span class="glyphicon glyphicon-save"></span>修改
    </button>

</div>

<script>
    angular.module('myApp', []).controller('userCtrl', function($scope) {
        $scope.fName = '';
        $scope.lName = '';
        $scope.passw1 = '';
        $scope.passw2 = '';
        $scope.users = [
            {id:1, fName:'Hege', lName:"Pege" },
            {id:2, fName:'Kim',  lName:"Pim" },
            {id:3, fName:'Sal',  lName:"Smith" },
            {id:4, fName:'Jack', lName:"Jones" },
            {id:5, fName:'John', lName:"Doe" },
            {id:6, fName:'Peter',lName:"Pan" }
        ];
        $scope.edit = true;
        $scope.error = false;
        $scope.incomplete = false;

        $scope.editUser = function(id) {
            if (id == 'new') {
                $scope.edit = true;
                $scope.incomplete = true;
                $scope.fName = '';
                $scope.lName = '';
            } else {
                $scope.edit = false;
                $scope.fName = $scope.users[id-1].fName;
                $scope.lName = $scope.users[id-1].lName;
            }
        };

        $scope.$watch('passw1',function() {$scope.test();});
        $scope.$watch('passw2',function() {$scope.test();});
        $scope.$watch('fName', function() {$scope.test();});
        $scope.$watch('lName', function() {$scope.test();});

        $scope.test = function() {
            if ($scope.passw1 !== $scope.passw2) {
                $scope.error = true;
            } else {
                $scope.error = false;
            }
            $scope.incomplete = false;
            if ($scope.edit && (!$scope.fName.length ||
                    !$scope.lName.length ||
                    !$scope.passw1.length || !$scope.passw2.length)) {
                $scope.incomplete = true;
            }
        };
    });
</script>

</body>
</html>
雾里看花叹朦胧
关注
专栏目录
基于AngularJs框架的BootStrap模板整合
03-03
基于AngularJs框架的BootStrap模板整合，精美后台模块，功能强大。
AngularJS bootstrap启动详解及实例代码
11-25
为了实现更灵活的启动，AngularJS提供了`angular.bootstrap`函数，允许我们从JavaScript代码中启动应用。这个函数的使用如下： ```javascript angular.bootstrap(element, [modules], [config]); ``` - `element`: ...
AngularJS Bootstrap
suichen1的专栏
02-26 540
1.如果想要你的应用自动启动Angular的话，那就把ng-app放在应用的根节点中，通常情况下是标签中， 自动初始化 Angular在以下两种情况下自动初始化：一个是DOMContentLoaded事件触发，或者在angular.js脚本被执行的同时如果document.readyState被置为'complete'。初始化时,Angular会去找ng-app这个指明应用开始所在的指令。
angular.js Bootstrap
qq_35772936的博客
02-24 187
你可以在你的 AngularJS 应用中加入 Twitter Bootstrap，你可以在你的 &lt;head&gt;元素中添加如下代码: &lt;link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css"&gt;  angular.js  Bootstrap 实例： ...
AngularJs整合ui-bootstrap以及ui-grid
weixin_30530523的博客
04-21 724
1.ui-bootstrap 参考博客:http://www.cnblogs.com/pilixiami/p/5597634.html （这篇博客写的非常不错,值得推荐） angular-ui-bootstrap的github地址:http://angular-ui.github.io/bootstrap/ 最新的angular-ui-bootstrap版本地址:https://...
AngularJs bootstrap搭载前台框架——准备工作
10-21
在构建现代化的Web应用时，AngularJS和Bootstrap的结合是一个常用的选择。AngularJS是一个由Google维护的JavaScript MVC框架，它提供了强大的数据绑定和依赖注入功能，使得前端开发更加高效。而Bootstrap则是Twitter...
API.zip_API_AngularJS Bootstrap_angularjs_bootstrap api
09-21
Ajax,AngularJS,Bootstrap,css2,css4,DHTML,DOM,DTD,EasyUI,Ext2.2,Html5,html,JavaEE,JSP,lINUX,MySQL,Servelt,Spring,Struts2,W3C,XML,
疯狂前端开发讲义 jQuery AngularJS Bootstrap前端开发实战
05-08
在前端开发领域，jQuery、AngularJS和Bootstrap是三个极为重要的技术框架，它们分别在不同的层面上解决了网页开发中的各种问题，极大地提高了开发效率和用户体验。接下来，我们将详细探讨这三个技术的核心概念、应用...
AngularJs+Bootstrap前端框架
10-08
基于angularjs+bootstrap的前端框架，内置全套angularjs插件及bootstrap插件
基于AngularJs + Bootstrap + AngularStrap 省市区联动实践
04-30
NULL 博文链接：https://bijian1013.iteye.com/blog/2392683
Bootstrap和Angularjs配合自制弹框的实例代码
11-23
指令 directive('bsPopup', function ($parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, elem, attrs, ctrl) { scope.$watch(function () { return $parse(ctrl.$modelValue)(scope); }, function (newValue) { if (newValue ==0) { $(elem).modal('hide'); return; } if (newValue == 1) { $
基于bootstrapangularjs的后台管理系统
08-11
基于bootstrap angularjs的后台管理系统
angularJs和bootstarp的使用
JackMaster_xh的博客
07-28 585
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> × 是否确认要删除该数据? 取消 确定 <div class="modal fade" id="updateEmp
AngularJS_02_Bootstrap
pre_eminent的JAVA学习园地
11-06 262
这一章讲述 Angular 初始化过程以及必要的时候用户如何能够手动将 Angular 初始化。 Angular &lt;script&gt; 标签 下面例子展示了推荐的在应用中使用 Angular 的自动初始化的代码路径设置。 &lt;!doctype html&gt; &lt;html ng-app&gt; &lt;body&gt; ... &lt;script s...
AngularJS+Bootstrap
Accept_008的博客
03-12 382
AngularJS+Bootstrap综合应用案例
AngularJS API之bootstrap启动
lijunxian0114的专栏
02-28 469
AngularJS API之bootstrap启动对于一般的使用者来说，AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中，这样就显得很不方便了。绑定初始化通过绑定来进行angular的初始化，会把js代码侵入到html中，但是对于新手使用来说，还是足够了！&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Conten...
AngularJs学习笔记--bootstrap
最新发布
精选资讯文章
06-04 693
这里是ng-app里面~~~{{1+3*2}}</div><div ng-app class="ng-cloak">这里是ng-app里面~~~{{1+3*2}}
Angularjs与Bootstrap打造实战TODO List教程
本文档详细介绍了如何使用AngularJS和Bootstrap结合制作一个简单的待办事项列表（TODO List）的项目。AngularJS是一款流行的JavaScript框架，它基于MVC（Model-View-Controller）架构，强调事件驱动的应用开发。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值