Angular小工程,实现图书的增删改($scope)

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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;
}

});
<think>我们注意到用户本次询问的是AngularJS中的$scope概念(注意是AngularJS,不是Angular)。根据引用内容,$scopeAngularJS中扮演着核心角色,它是连接控制器(Controller)和视图(View)的桥梁,也是实现双向数据绑定的基础。下面将结合引用内容详细说明。###1.$scope的作用-**数据绑定载体**:$scope是一个JavaScript对象,用于存储视图所需的数据模型。在HTML中通过`{{表达式}}`或指令绑定$scope的属性[^1][^2]。-**作用域继承**:$scope形成树形结构,子$scope(如嵌套控制器内)会原型继承父$scope的属性(除非子$scope重写属性)[^1][^3]。-**事件传播**:提供`$emit()`向上(父级)和`$broadcast()`向下(子级)传播事件的方法[^1][^4]。-**变更检测**:通过`$watch()`监听数据变化,`$apply()`触发脏检查更新视图[^1][^4]。###2.$scope的生命周期(引用[4])1.**创建**:当控制器或指令被实例化时创建2.**注册监控**:模板中的绑定会自动注册`$watch`3.**模型变更**:用户交互或服务调用导致数据变化4.**变更观察**:AngularJS的脏检查机制检测变化5.**销毁**:当$scope不再需要时(如路由切换),调用`$destroy()`清理资源###3.关键使用场景####a)控制器中定义模型数据```javascriptmyApp.controller('firstCtrl',['$scope',function($sc){$sc.name="张三丰";//视图可通过{{name}}访问}]);```####b)嵌套作用域继承(引用[2]示例)```html<divng-controller="parentCtrl">{{name}}<!--显示父级name--><divng-controller="childCtrl">{{name}}<!--显示子级name,覆盖父级属性-->{{age}}<!--继承自父级--></div></div>```####c)根作用域($rootScope)-整个应用唯一的顶级作用域,通过依赖注入使用[^2]:```javascriptmyApp.run(['$rootScope',function($rsc){$rsc.sex='男';//全局可访问}]);```####d)事件通信```javascript//子控制器发送事件$scope.$emit('userEvent',data);//父控制器监听$scope.$on('userEvent',function(event,data){...});```###4.注意事项-**作用域隔离**:指令中使用`scope:{...}`会创建独立作用域,不继承父级属性[^3]-**性能优化**:避免过度使用`$watch`,及时移除手动注册的监听器-**避免直接操作DOM**:数据变更应通过$scope,由AngularJS更新视图###示例代码解析(引用[2])```html<!--视图--><divng-app="myApp"><divng-controller="firstCtrl">{{name}}<!--"张三丰"-->{{age}}<!--未定义,不显示--><divng-controller="secondCtrl">{{name}}<!--"灭绝师太"(覆盖父级)-->{{age}}<!--108(来自$rootScope)-->{{sex}}<!--"男"(来自$rootScope)--></div></div>{{sex}}<!--"男"(全局)--></div><script>varmyApp=angular.module('myApp',[]);//控制器1:注入$scopemyApp.controller('firstCtrl',['$scope',function($sc){$sc.name="张三丰";}]);//控制器2:同时注入$scope和$rootScopemyApp.controller('secondCtrl',['$scope','$rootScope',function($sc,$rsc){$sc.name="灭绝师太";$rsc.age=108;//直接修改$rootScope}]);//初始化全局数据myApp.run(['$rootScope',function($rsc){$rsc.sex='男';}]);</script>```**效果解释**:-`firstCtrl`作用域:只有`name`属性-`secondCtrl`作用域:有`name`属性(覆盖父级),通过`$rootScope`设置`age`全局可见-`sex`由`$rootScope`定义,所有作用域可访问§§相关问题§§1.AngularJS中如何实现控制器之间的通信?2.$scope.$watch()的使用场景和注意事项是什么?3.AngularJS与Angular在作用域管理上有何区别?</think>### AngularJS中$scope的作用与使用方法 **$scope** 是 AngularJS(1.x)的核心概念,作为连接控制器(Controller)和视图(View)的桥梁,实现**双向数据绑定**和**MVC架构**的基础[^1][^4]。以下是详细解析: --- ### 一、核心作用 1. **数据模型载体** - 存储视图所需数据,如`$scope.name = "张三丰"`[^2] - 在HTML中通过`{{name}}`直接访问[^2] 2. **作用域继承体系** - 树形结构:从根作用域`$rootScope`(ng-app层级)向下继承[^1][^3] - 子作用域**原型继承**父作用域属性(非覆盖式继承)[^3] ```html <!-- 示例:嵌套作用域 --> <div ng-controller="parentCtrl"> {{name}} <!-- 父级数据 --> <div ng-controller="childCtrl"> {{name}} <!-- 可访问父级name,除非重写 --> </div> </div> ``` 3. **事件传播机制** - `$scope.$emit()`:向上传递事件(父级/祖先)[^1] - `$scope.$broadcast()`:向下传递事件(子级/后代)[^1] 4. **变更检测基础** - `$scope.$watch()`:监听数据变化[^1][^4] - `$scope.$apply()`:手动触发脏检查(更新视图)[^4] --- ### 二、关键使用方法 #### 1. 基础数据绑定 ```javascript myApp.controller('demoCtrl', ['$scope', function($scope) { $scope.title = "Hello AngularJS"; // 定义模型数据 $scope.user = { id: 1, name: "John" }; }]); ``` ```html <!-- 视图绑定 --> <h1>{{title}}</h1> <p>User: {{user.name}}</p> ``` #### 2. 作用域继承实践 ```javascript // 父控制器 myApp.controller('parentCtrl', ['$scope', function($scope) { $scope.sharedData = "父级数据"; }]); // 子控制器 myApp.controller('childCtrl', ['$scope', function($scope) { // 自动继承sharedData,可直接使用 $scope.localData = "子级独有数据"; // 仅子作用域可见 }]); ``` #### 3. 事件通信 ```javascript // 子控制器发送事件 $scope.$emit('customEvent', { data: "向上传递" }); // 父控制器监听事件 $scope.$on('customEvent', function(event, args) { console.log("收到事件:", args.data); // 输出"向上传递" }); ``` #### 4. 监听数据变化 ```javascript $scope.$watch('user.name', function(newVal, oldVal) { console.log(`名字从 ${oldVal} 变为 ${newVal}`); }); ``` --- ### 三、重要注意事项 1. **作用域隔离性** - 每个`ng-controller`创建独立$scope[^3] - 指令(如`ng-repeat`)会创建子作用域 2. **根作用域($rootScope)** - 全局唯一顶级作用域[^1][^4] - 存储全局数据(如用户登录状态) ```javascript myApp.run(['$rootScope', function($rootScope) { $rootScope.appVersion = "1.0.0"; }]); ``` 3. **性能优化** - 避免深层嵌套`$watch`(影响脏检查效率) - 及时销毁作用域:`$scope.$destroy()`[^4] --- ### 典型问题示例 ```html <div ng-app="myApp"> <div ng-controller="mainCtrl"> {{globalData}} <!-- 显示根作用域数据 --> <div ng-controller="subCtrl"> {{localData}} <!-- 子作用域数据 --> {{globalData}} <!-- 仍可访问根作用域 --> </div> </div> </div> <script> angular.module('myApp', []) .run(['$rootScope', function(rs) { rs.globalData = "根作用域数据"; }]) .controller('mainCtrl', ['$scope', function($scope) { $scope.mainProp = "主控制器属性"; }]) .controller('subCtrl', ['$scope', function($scope) { $scope.localData = "子控制器数据"; }]); </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值