angular事件关键字

最新推荐文章于 2024-02-08 00:19:12 发布
最新推荐文章于 2024-02-08 00:19:12 发布
阅读量333 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_sq18/article/details/78607841
版权 
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../../angular/angular.js"></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.products = [{
                    "id": 80,
                    "name": "iPhone",
                    "price": 5400,
                    state: false
                }, {
                    "id": 1200,
                    "name": "ipad mini",
                    "price": 2200,
                    state: false
                }, {
                    "id": 500,
                    "name": "ipad air",
                    "price": 2340,
                    state: false
                }, {
                    "id": 290,
                    "name": "ipad",
                    "price": 1420,
                    state: false
                }, {
                    "id": 910,
                    "name": "imac",
                    "price": 15400,
                    state: false
                }];

                //按照年龄进行过滤
                $scope.search = "";

                //下拉菜单过滤商品价格范围
                $scope.productPrice = "--请选择--";
                $scope.isShow = function(price) {
                    if($scope.productPrice == "--请选择--") {
                        return true;
                    } else {
                        var priceArr = $scope.productPrice.split("-");
                        var min = priceArr[0];
                        var max = priceArr[1];
                        if(price < min || price > max) {
                            return false;
                        } else {
                            return true;
                        }
                    }
                }

                //全选反选
                $scope.selectAll = false;
                $scope.selectAllFun = function() {
                    if($scope.selectAll) {
                        for(index in $scope.products) {
                            $scope.products[index].state = true;
                        }
                    } else {
                        for(index in $scope.products) {
                            $scope.products[index].state = false;
                        }
                    }
                }
                //全不选
                $scope.checkSelectAll = function() {
                    var a = 0;
                    for(index in $scope.products) {
                        if(!$scope.products[index].state) {
                            $scope.selectAll = false;
                        } else {
                            a++;
                        }
                        if(a == $scope.products.length) {
                            $scope.selectAll = true;
                        } else {
                            $scope.selectAll = false;
                        }
                    }
                }
                //批量删除
                $scope.delSelect = function() {
                    var arr = [];
                    for(index in $scope.products) {
                        if($scope.products[index].state) {
                            arr.push($scope.products[index].name);
                        }
                    }

                    if(arr.length <= 0) {
                        alert("请先选择删除项");
                    } else {
                        if(window.confirm("确定删除吗？")) {
                            for(index in arr) {
                                for(index2 in $scope.products) {
                                    if(arr[index] == $scope.products[index2].name) {
                                        $scope.products.splice(index2, 1);
                                    }
                                }
                            }
                        }
                    }
                }

                //新增商品
                $scope.formShow = false;
                $scope.formShowFun = function() {
                    if($scope.formShow) {
                        $scope.formShow = false;
                    } else {
                        $scope.formShow = true;
                        $scope.updateShow = false;
                    }
                }

                //提交新加商品进行验证
                $scope.newId = "";
                $scope.newName = "";
                $scope.newPrice = "";
                $scope.checkSub = [];
                $scope.divShow = false;
                $scope.sub = function() {
                    $scope.checkSub = [];
                    if($scope.newId == "" || $scope.newId == null) {
                        $scope.checkSub.push("产品编号为空");
                    } else if(isNaN($scope.newId)) {
                        $scope.checkSub.push("产品编号不是整数");
                    }
                    if($scope.newName == "" || $scope.newName == null) {
                        $scope.checkSub.push("产品名称为空");
                    }
                    if($scope.newPrice == "" || $scope.newPrice == null) {
                        $scope.checkSub.push("产品价格为空");
                    } else if(isNaN($scope.newPrice)) {
                        $scope.checkSub.push("产品价格不是整数");
                    }

                    if($scope.checkSub.length > 0) {
                        $scope.divShow = true;
                    } else {
                        $scope.divShow = false;
                        var newPro = {
                            "id": parseInt($scope.newId),
                            "name": $scope.newName,
                            "price": parseInt($scope.newPrice),
                            state: false
                        };
                        $scope.products.push(newPro);
                    }
                }

                //修改页面
                $scope.updateShow = false;
                $scope.updateId = "";
                $scope.updateName = "";
                $scope.updatePrice = "";
                $scope.updateShowFun = function(pro) {
                    $scope.updateShow = true;
                    $scope.formShow = false;
                    $scope.updateId = pro.id;
                    $scope.updateName = pro.name;
                    $scope.updatePrice = pro.price;
                }
                $scope.updateSub = function() {
                    $scope.updateArr = [];
                    if($scope.updateName == "" || $scope.updateName == null) {
                        $scope.updateArr.push("产品名称为空");
                    }
                    if($scope.updatePrice == "" || $scope.updatePrice == null) {
                        $scope.updateArr.push("产品价格为空");
                    } else if(isNaN($scope.updatePrice)) {
                        $scope.updateArr.push("产品价格不是整数");
                    }

                    //验证不满足
                    if($scope.updateArr.length > 0) {
                        $scope.haha = true;
                    } else {
                        $scope.haha = false;
                        for(index in $scope.products) {
                            if(parseInt($scope.updateId) == $scope.products[index].id) {
                                $scope.products[index].name = $scope.updateName;
                                $scope.products[index].price = $scope.updatePrice;
                                $scope.updateShow = false;
                            }
                        }
                    }
                }
            });
        </script>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">
        <center>
            <h3>购物车</h3>
            <input type="text" size="10" placeholder="产品名称" ng-model="search" /> 产品价格
            <select ng-model="productPrice">
                <option>--请选择--</option>
                <option>0-2000</option>
                <option>2001-3000</option>
                <option>3001-4000</option>
                <option>4001-5000</option>
                <option>5001-6000</option>
                <option>6001-7000</option>
                <option>7001-8000</option>
                <option>8001-无穷大</option>
            </select>
            <select ng-model="selOrder">
                <option value="">排序方式</option>
                <option value="id">id正序</option>
                <option value="-id">id逆序</option>
                <option value="price">价格正序</option>
                <option value="-price">价格逆序</option>
            </select>
            <button ng-click="delSelect()">批量删除</button>
            <br /><br />
            <table border="1px solid blue" cellpadding="8" cellspacing="0">
                <thead>
                    <tr>
                        <th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
                        <th>产品编号</th>
                        <th>产品名称</th>
                        <th>产品价格</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="pro in products | filter:{'name':search} | orderBy:selOrder" ng-show="isShow(pro.price)">
                        <td><input type="checkbox" ng-model="pro.state" ng-click="checkSelectAll()" /></td>
                        <td>{{pro.id}}</td>
                        <td>{{pro.name}}</td>
                        <td>{{pro.price | currency:"￥："}}</td>
                        <td>
                            <button>删除</button>
                            <button ng-click="updateShowFun(pro)">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table><br />
            <button ng-click="formShowFun()">添加新产品</button><br /><br />
            <form style="border: 1px solid blue; width: 300px;" ng-show="formShow">
                <h3>添加商品</h3> 商品编号：
                <input type="text" placeholder="商品编号" ng-model="newId" /><br /><br /> 商品名称：
                <input type="text" placeholder="商品名称" ng-model="newName" /><br /><br /> 商品价格：
                <input type="text" placeholder="商品价格" ng-model="newPrice" /><br /><br />
                <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="divShow">
                    <ul>
                        <li ng-repeat="chenk in checkSub">{{chenk}}</li>
                    </ul>
                </div><br />
                <input type="button" value="提交" ng-click="sub()" />
            </form>

            <!-- 修改 -->
            <form style="border: 1px solid blue; width: 300px;" ng-show="updateShow">
                <h3>修改商品</h3> 商品编号：
                <input type="text" placeholder="商品编号" ng-model="updateId" disabled="disabled" /><br /><br /> 商品名称：
                <input type="text" placeholder="商品名称" ng-model="updateName" /><br /><br /> 商品价格：
                <input type="text" placeholder="商品价格" ng-model="updatePrice" /><br /><br />
                <div style="border: 1px solid blue; width: 250px; background-color: pink;" ng-show="haha">
                    <ul>
                        <li ng-repeat="chenk in updateArr">{{chenk}}</li>
                    </ul>
                </div><br />
                <input type="button" value="提交" ng-click="updateSub()" />
            </form>
        </center>
    </body>

</html>
怎么了没怎么
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
angular的事件
归小超博客
03-14 3416
这张图中有两个视图块A和B，它们分别又有两个子视图。这时候，如果子视图A1想要发出一个业务事件，使得B1和B2能够得到通知，过程就会是： 沿着父作用域一路往上到达双方共同的祖先作用域 从祖先作用域一级一级往下进行广播，直到到达需要的地方 简化一下： 对于这种事件的传播方式，举个例子，1班班长想要给2班班长发个通知，他的通知方向是一级一级向上汇报，直到双方共同的老师，然后再沿着路线向下去通知。...
Angular——事件
前端的路上
11-27 445
类型 句法 类别 插值 属性 属性 类 样式 content_copy{{expression}} [target]="expression" bind-target="expression" 从数据源 到查看目标的单向方式 事件 content_copy(target)="statement...
Angular js部分关键字的理解
weixin_30616969的博客
12-16 76
模板：动态模板，是动态的，直接去处理DOM的，而不是通过处理字符串模版（静态模板） mvc：核心思想实现“数据管理-数据模型Model、应用逻辑-控制器Controller、数据表现-视图View”三者的之间的分离。view从model获取数据把数据展示到界面上，当有用户操作处理交互时，控制器controller去改变数据model，然后通知view去做相应的改变；各司其职。 双向绑定：意味着...
AngularJS关键字查询
xiaozi_11的博客
11-22 447
week3                                                  商品库存管理系统                                                           按货物数量正序排序                 按货物数量反序排序                 按货物入库时间正序排序  
AngularJS 事件
刚出生的程序猿
07-28 1514
本篇文章参考自AngularJS权威教程。 1.简介　　事件是解耦的好工具，Angular应用提供了很好的事件响应机制，让我们能够在应用中嵌套的各组件之间进行通信。2.事件传播　　由于作用域是有层次的，所以我们可以在作用域链上传递事件，也正因为此，各作用域接收事件是有次序的。Angular提供了两个方法， $emit()和$broadcast方法，分别能够向上和向下传播事件。注意，$emit()方法
angular 搜索/查找关键字高亮
weixin_34362875的博客
10-23 326
/** * Created by JUNHUI on 2016/11/21. */ /* * 参数说明: * obj: 对象, 要进行高亮显示的html标签节点. * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格分隔多个词 . * bgColor: 背景颜色，默认为红色. */ ( function(){...
在 Angular 中实现搜索关键字高亮示例
12-01
但是，在有些情况下，比如我们有一个搜索框，希望将搜索的关键字在正文中高亮出来，这时候就会感觉比较吃力了，filter 可以帮助我们处理这种情况。 实际上，很多时候，我们的数据是不能直接输出到 DOM 中的，典型的...
angular 路由
03-15
使用`as`关键字为路由设置别名，方便在模板中使用。 10. **路由复用策略(Route Reuse Strategy)** 控制路由组件的复用策略，比如在返回历史记录时决定是否重新创建组件。 11. **路由模块(Routing Modules)** ...
angular.bind使用心得
09-03
`angular.bind`是AngularJS框架中的一个非常实用的工具，它允许我们固定一个函数的上下文（`this`关键字）并传递参数。在JavaScript中，`this`的值经常根据函数调用方式的不同而变化，这可能会导致一些难以预料的...
Angular实现下拉框模糊查询功能示例
01-19
本文实例讲述了Angular实现下拉框模糊查询功能。分享给大家供大家参考，具体如下： 前两天研究了一下angularjs，不得不说angularjs的mvc思想还是很强大的。对应偏重于数据处理的项目还是非常有优势的。 写了个搜索...
[Angular 基础] - 自定义事件 & 自定义属性
最新发布
GoldenaArcher的博客
02-08 1717
首先是从渲染和开始，所以需要将cockpit内的东西注释掉，以防报错如果不会报错的话则可以忽略，我后面又做了点修改……有的时候会想要设置 alias，而非使用传递过来的变量名——比如说可能父元素会创建一个事件然后传递event到子元素中，子元素则可以根据需求去重命名这是一个mouseEventinputEventformEvent// () 内的才是父组件里使用的变量名这个时候，对于当前组件来说，可访问的变量为，因此 V 层也需要进行对应的修改：</stylecolorred</</</</
5个常用的简单的angular事件
orange_cccc的博客
09-12 2702
1.点击旋转动画 html:[ngClass]="{'close':aaa,'open':!aaa}" (click)="aaa=!aaa" css:.close{transform:rotate(0deg);transition:transform 0.5s;} ts: aaa=false; 2.点击展开内容 html: (click)="open()" *ng...
[Angular学习笔记]Angular事件处理
salt_fash的博客
07-15 566
事件 当用户点击链接，按下按钮，输入文字时，这些动作都会触发DOM事件，本篇博客解释如何使用Angular 事件绑定语法把这些事件绑定到事件处理器。 事件绑定 Angular提供了事件绑定机制，可以响应任何DOM事件，Angular 的事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成。 下面事件绑定监听按钮的点击事件。每当点击发生时，都会调用组件的 onSave()&n...
【Angular教程 230106】03 Angular事件、表单事件、事件对象、双向数据绑定
qq_53433382的博客
01-06 1458
04 Angular事件、表单事件、事件对象、双向数据绑定（45分）
[AngularJS面面观] 11. scope事件机制 - 事件系统在Angular框架中的应用
不忘初心，好好沉淀
07-16 5302
此篇文章是angular事件机制相关的最后一篇文章。 主要介绍一下事件系统在Angular框架本身中的一些应用场景，看看在什么场景下使用事件是比较合适的。 移除scope后的广播 有过定义指令(directive)经验的同学们应该知道，很多指令都会拥有自己的scope，无论是隔离scope也好，还是原型继承的scope也好。这些指令在浏览器中也是通过对应模板(template)所表示的D
Angular实现同时多个关键词的高亮效果(自定义指令)
qq_28250493的博客
07-25 771
效果图: 1：使用方法 实现效果：可以同时高亮多个关键词(以#分割)，而且关键词不在乎大小写都可以查出结果）。 如有问题可发邮箱1536652623@qq.com html代码 &lt;span [innerHTML]="testStr|keyword:keyword"&gt;&lt;/span&gt; ts代码 keyword='a#b#c';//多个关键词以#分割 te...
angular -- get请求该如何使用？
weixin_33895016的博客
04-08 168
在做 angualr 的开发过程中，经常会用到的就是 ajax 请求。下面是 get 请求示例： 如果存在多个 get 请求可以考虑进行封装下： // get 携参数访问 ajaxGet(getUrl,{name:'张三'},function(res){ console.log(res ); }); function ajaxGet(url,data,fun){ ...
angular 自定义 scroll事件
weixin_34148456的博客
12-19 728
2019独角兽企业重金招聘Python工程师标准>>> ...
angular子组件接受参数时使用set、get
qq_39961695的博客
08-24 4518
angular子组件中使用@Input来接受子组件，最常见的是“及获及用”，代码如下： 父组件parent <app-child [name]="nameCon"></app-child> nameCon: 'Zita' 子组件child import { Input } from '@angular/core'; @Input() name: string; 但是，有的时候， 我们希望对接收到参数进行一些处理后，再展示； 或者只是想根据参数执行不同的方法； … 而这些需求都是可
Angular6自定义environment配置
tech_Wang的博客
05-22 8972
Angular6以往版本自定义environment配置在.angular-cli.json文件中，    1、在.angular-cli.json文件中 “environments中"添加    例如：        "environments": {            "dev": "environments/environment.ts",            "prod": "env...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值