Angular小工程，实现图书的增删改（$scope）

最新推荐文章于 2017-10-19 19:30:27 发布

原创最新推荐文章于 2017-10-19 19:30:27 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #bootstrap

angular 同时被 2 个专栏收录

11 篇文章

订阅专栏

小工程

4 篇文章

订阅专栏

本文介绍了一个使用Angular和Bootstrap构建的图书管理应用，展示了如何实现图书的增删改查功能，并通过自定义过滤器美化显示。

html部分，用bootstrap定义样式

<!DOCTYPE html>
<html lang="en"  >
<head>
    <meta charset="UTF-8">
    <title>图书增删改</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="script/angular.min.js"></script>
    <script src="script/books.js"></script>
 </head>
<body ng-app="myApp" ng-controller="userCtrl">
<div class="container">
        <h1>图书列表</h1>
        <table class="table table-striped">
        <thead>
        <tr>
            <th>编辑</th>
            <th>商品名称</th>
            <th>价格</th>
            <th>数量</th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="book in books" >
            <td>
            <button class="btn btn-danger" ng-click="delete(book)" >删除</button>
            <button class="btn btn-warning" ng-click="edit(book)">编辑</button>
        </td>
            <td>{{ book.bName | bookmark}}</td>
            <td>{{ book.bPrice| currency:'￥'}}</td>
            <td class="col-xs-1">
                <input type="number" class="form-control" min="1" max="10" ng-model="book.bNum" ng-disabled="book.noedit"/>
            </td>
        </tr>
        </tbody>
        </table>
    <div class="pull-left">
        <button  class="btn btn-success" ng-click="save()"  ng-disabled="nosave">保存</button>
    </div>
        <div class="pull-right" >
        <label class="btn btn-info">合计</label>
            <label>{{totalPrice() |currency:'￥'}}</label><br>
        </div>


<div class="clearfix"></div>
<hr>
<div class="form-group">
<button class="btn btn-success" ng-click="addBook()" ng-disabled="bookform.$invalid">
添加新图书
</button>
</div>
    <form name="bookform" class="form-horizontal col-md-2">
        <div class="form-group">
         <label>图片名称:</label>
         <input type="text" class="form-control" required ng-model="bName" ng-disabled="!edit" >
        </div>
        <div class="form-group">
        <label>价格:</label>
            <input type="text" class="form-control" required ng-model="bPrice"/>
        </div>
        <div class="form-group">
            <label>数量:</label>
            <input type="number" class="form-control" min="1" max="10" required ng-model="bNum"/>
        </div>
    </form>
</div>


</body>
</html>

js部分

var booklist = [
{id:1, bName:'HTML5+CSS3从入门到精通（附光盘）',bPrice:59.5,bNum:1,noedit:true },
{id:2, bName:'HTM5权威指南',bPrice:112.10,bNum:1,noedit:true},
{id:3, bName:'响应式web设计',bPrice:42.60,bNum:2,noedit:true},
{id:4, bName:'深入理解HTML5',bPrice:55.60,bNum:1,noedit:true},
{id:5, bName:'JavaScript高级编程',bPrice:33.70,bNum:1,noedit:true },
{id:6, bName:'锋利的jQuery',bPrice:28.90,bNum:1,noedit:true }
];
var app = angular.module('myApp', []);
//自定义书名号过滤器
app.filter('bookmark', function(){
    return function(item){
        return "《" + item + "》";        
        }   
    });

//创建控制器
app.controller('userCtrl', function($scope) {
$scope.bName = '';
$scope.bPrice = '';
$scope.tPrice = 0;
$scope.nosave = true;
$scope.books = booklist;
//删除图书
$scope.delete = function(book) {
$scope.books.splice($scope.books.indexOf(book), 1);
};
//编辑图书
$scope.edit = function(book){
    $scope.nosave = false;
    book.noedit = false;

    };
//保存修改
$scope.save = function(){
    $scope.nosave = true;
    angular.forEach($scope.books,function(data){   
        data.noedit = true;
        });
    };

//添加图书
$scope.addBook = function(){
 if(!isNaN(parseFloat($scope.bPrice))){
var i = $scope.books.length;
$scope.bPrice= parseFloat($scope.bPrice); //将价格转换为浮点数
$scope.books.push({id:i, bName:$scope.bName,bPrice:$scope.bPrice,bNum:$scope.bNum,noedit:true });
$scope.bName = "";
$scope.bPrice = "";
} 
};
//计算总价
$scope.totalPrice = function(){
var sum = 0;
angular.forEach($scope.books, function(data){
    sum = sum + data.bPrice*data.bNum;
    });
return sum;
}

});