Angularjs+Bootstrap

在angularjs中使用bootstrap过程如下：

1.在页面中引入bootstrap的样式文件（自己下载bootstrap框架）

也可以引用官方的：链接

 案例：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bootstrap</title>
    <meta charset="utf-8" />
    <link href="../Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="../scripts/angerlarjs.min.js"></script>
    <style>
        input {
            width: 150px;
        }
    </style>

</head>
<body>
    <div ng-app="Myapp" ng-controller="UserControll">
        <p style="text-align:center;"><h2>用户列表</h2></p>
        <div style="text-align:left;">
            <table class="table table-striped">
                <thead>
                    <tr style="background-color:antiquewhite;">
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>状态</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in UsersInfo" style="background-color:azure;">
                        <td>{{x.UserId}}</td>
                        <td>{{x.Name}}</td>
                        <td>{{x.Status}}</td>
                        <td>{{x.CreateTime}}</td>
                        <td>
                            <button class="btn" ng-click="EditUser(x.Id)"><span class="glyphicon glyphicon-pencil"></span>编辑</button>
                        </td>
                    </tr>

                </tbody>

            </table>
        </div>

        <div style="text-align:left;">
            <button type="button" class="btn btn-success" ng-click="EditUser('0')">
                <span class="glyphicon glyphicon-edit"></span>新增
            </button>
        </div>

        <div>
            <form class="form-horizontal" style="width:500px;border:1px solid black;">
                <fieldset>
                    <legend>
                        <label ng-show="!edit">添加用户信息</label>
                        <label ng-show="edit">修改用户信息</label>
                    </legend>
                </fieldset>
                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        账号：
                    </label>
                    <div class="col-sm-10">
                        <input type="hidden" ng-model="Id" />
                        <input type="text" class="form-control" style="width:150px;" ng-model="UserId" 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" class="form-control" style="width:150px;" ng-model="Name" placeholder="请输入姓名" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        密码：
                    </label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" style="width:150px;" ng-model="Pwd" placeholder="请输入密码" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">
                        状态：
                    </label>
                    <div class="col-sm-10">
                        <select ng-model="OptionSelect" class="selectpicker show-tick form-control" style="width:100px;" ng-options="x.val as x.name for x in StatusOptions"></select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-12">
                        <button class="btn btn-success" ng-click="Save()" ng-disabled="incomplete">
                            <span class="glyphicon glyphicon-save">保存</span>
                        </button>
                    </div>
                </div>

            </form>
        </div>

        <script>
            var app = angular.module("Myapp", []);
            app.controller("UserControll", function ($scope, $http) {
                $scope.StatusOptions = [{ val: "0", name: "禁用" }, { val: "1", name: "启用" }];
                $scope.OptionSelect = $scope.StatusOptions[0].val;

                //缓存用户信息
                $http.get("/Service/GetUserInfo.ashx").success(
                    function (response) {
                        for (var i = 0; i < response.length; i++) {
                            response[i].Status = response[i].Status == false ? "启用" : "禁用";
                        }
                        $scope.UsersInfo = response;
                    });
                //开始处理表单
                $scope.edit = false;
                //$scope.error = false;
                $scope.incomplete = false;
                //获取选中的值


                //添加/修改触发的事件
                $scope.EditUser = function (id) {
                    //新增
                    if (id == "0") {
                        $scope.edit = false;
                        $scope.UserId = "";
                        $scope.Name = "";
                        $scope.Pwd = "";
                        $scope.CheckStatus("启用");
                    }
                        //修改
                    else {
                        $scope.edit = true;
                        $scope.UserId = $scope.UsersInfo[0].UserId;
                        $scope.Name = $scope.UsersInfo[0].Name;
                        $scope.Pwd = $scope.UsersInfo[0].Pwd;
                        $scope.CheckStatus($scope.UsersInfo[0].Status);
                    }
                }
                //选中状态
                $scope.CheckStatus = function (Status) {
                    for (var i = 0; i < $scope.StatusOptions.length; i++) {
                        if ($scope.StatusOptions[i].name == Status) {
                            $scope.OptionSelect = $scope.StatusOptions[i].val;
                        }
                    }
                }

                //监控方法
                //$scope.$watch('UserId', function () { $scope.Watch(); });
                //$scope.$watch('Name', function () { $scope.Watch(); });
                //$scope.$watch('Pwd', function () { $scope.Watch(); });


                //监控模型状态后做出相应变化
                $scope.Watch = function () {
                    if ($scope.UserId == null && $scope.Name == null && $scope.Pwd == null) {
                        $scope.incomplete = true;
                    }
                };
                //保存
                $scope.Save = function () {
                    //$http({
                    //    method: 'Post',
                    //    url: '/Service/GetUserInfo.ashx/UserinfoEdit',
                    //    params: {
                    //        userinfo: $scope.UsersInfo
                    //    }
                    //});
                };
            })
        </script>
    </div>
</body>
</html>

 

 

 下面是bootstrap常用的样式：

元素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 列

 

posted @ 2017-01-10 01:17  微笑代表淡定.Net  阅读(402)  评论(0)    收藏  举报