AngularJS带给你一个简单完善的Demo

最新推荐文章于 2018-07-08 00:05:34 发布
最新推荐文章于 2018-07-08 00:05:34 发布
阅读量2.1k 收藏 2
点赞数 1
分类专栏： 【网站前端】 文章标签： bootstrap angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/U_9_5/article/details/50548075
版权

上截图了，看效果，都是用angulaJS+BootStrap实现的，代码极其简介，
用到的有：

1.1 完善的例子
1.2 双向数据绑定
1.3 过滤器工厂使用
1.4 repeat绑定
1.5 自动排序
1.7 交互式显隐元素
1.8 通过Ajax获取数据

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

贴代码喽

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="todoApp">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/angular/angular.js"></script>
    <link href="js/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="js/bootstrap/bootstrap-theme.css" rel="stylesheet" />
</head>
<body ng-controller="ToDoCtrl">
    <div class="page-header">
        <h2>
            {{todo.user}}做的列表
            <span class="label label-default" ng-hide="incompleteCount()==0"
                  ng-class="warningLevel()">{{incompleteCount()}}</span>
        </h2>
    </div>
    <div class="panel">
        <div class="input-group">
            <input class="form-control" ng-model="actionText" />
            <span class="input-group-btn">
                <button class="btn btn-danger" ng-click="addNewItem(actionText)">添加</button>
            </span>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in todo.items | checkedItems:showComplete| orderBy:'action'">
                    <td>{{item.action}}</td>
                    <td><input type="checkbox" ng-model="item.done" /></td>
                    <td>{{item.done}}</td>
                </tr>
            </tbody>
        </table>
        <div class="checkbox-inline">
            <label><input type="checkbox" ng-model="showComplete" />显示全部</label>
        </div>
    </div>
    <script type="text/javascript">
        var model = {
            user: "刘壮",
            items:[]
        };

        var todoApp = angular.module("todoApp", []);

        //加载json数据
        todoApp.run(function ($http) {
            $http.get("todo.txt").success(function (data) {
                model.items = data;
            });
        });
        //控制器
        todoApp.controller("ToDoCtrl", function ($scope) {
            $scope.todo = model;

            //计算选中的数量
            $scope.incompleteCount = function () {
                var count = 0;
                angular.forEach($scope.todo.items, function (item) {
                    if (item.done) { count++ };
                })
                return count;
            }

            //得到不同的css style 
            $scope.warningLevel = function () {
                return $scope.incompleteCount() > 3 ? "label-warning" : "label-success";
            }

            //添加新项
            $scope.addNewItem = function (actionText) {
                $scope.todo.items.push({ action: actionText, done: true });
            }


        })

        //过滤器工厂
        todoApp.filter("checkedItems", function () {
            return function (items, showComplete) {
                var resultArr = [];
                angular.forEach(items, function (item) {
                    if (showComplete == true||item.done == false) {
                        resultArr.push(item);
                    }
                });
                return resultArr;
            }
        })
    </script>
</body>
</html>

自定义todo.txt(原本是json文件)

[               { "action": "C 第一条", "done": false },
                { "action": "D 第二条", "done": false },
                { "action": "B 第三条", "done": true },
                { "action": "A 第四条", "done": false }
            ]
文刀木由
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs的一个demo（适合初学者，不大也不小）
08-04
适合初学angularjs的一个demo，不大不小，刚刚学习的同学可以下载看看
AngularJS - 入门小Demo
不积跬步，无以至千里
10-22 1762
AngularJS四大特效 MVC模式、模块化设计、自动化双向数据绑定、依赖注入 如果了解了后端开发知识，想必对这些词汇不会陌生，AngularJS融合了后端开发的一些思想，虽然身为前端框架，但与jQuery框架却是完全不相同的东西。 AngularJS分为几个模块，需要使用哪个模块的功能，就直接引入对应的模块，这种模块化设计具备高内聚、低耦合的特点。 官方提供的模块有：ng、ngRoute、ng...
AngularJS入门小Demo
10-22
项目笔记地址：https://blog.csdn.net/lewky_liu/article/details/83280754
angularjs 的入门Demo
hanzl1的博客
07-08 452
1.前提引入angular.min.js  入门&lt;html&gt;&lt;head&gt;&lt;title&gt;angularjs入门demo&lt;/title&gt;&lt;script src="angularjs/angular.min.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body  ng-app  ng-in
angularjs简单demo（转载，原网址找不到了）
爱吃炒饭的逗比小豆豆的博客
10-17 771
1.效果图 2.文件结构 3.代码 （1）index.html user info demo 用户管理demo loading... (2)list.html Title 用
对angular.js的一点理解
aojiao7270的博客
01-14 210
最近一直在学习angular.js。不得不说和jquery相比有很大不同，有很多的不同点，之前也用过Knockout.js 但是两者还是有一定的区别的，首先knockout.js是基于Mvvm的，是几乎纯粹的dom 绑定没有一个架构一样的东西。而angular.js 则有dom 绑定还有mvc 架构的支持。一 angular.js 和以前的js 框架有的区别: 1 传统的前...
angularjs 页面权限控制
sinat_38992528的博客
11-17 2493
权限的设计中比较常见的就是RBAC基于角色的访问控制,基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。     一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样
AngularJS Demo
07-19
AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等，本例子 是AngularJS 静态demo ， 可以当入门学习，方便快速上手。
[简单]Spring AngularJs简单CRUD示例
小瓜的博客
06-23 165
       上次写了篇Spring CRUD的简单例子，没想到很多人访问，由于本人在学习AngularJs中文社区的翻译文章很头疼，所以自己写了个简单的Spring AngularJs的练练手，先说明下：        1)例子没有使用数据库，数据都传送到后台了，想使用Hibernate或者Mybatis保存到数据库请自行添加代码，相信这一步会很容易。       2)页面文件在index...
angularjs 开发实例
05-30
angularjs的开发实例，解压，将文件夹方法tomcat中，即可运行。 访问/app/index.html
AngularJS+WebAPI入门Demo
09-06
angularJS+WebAPI实现的用户登录、数据列表获取、修改、删除的功能，适合入门的初学者
利用angular-cli构建
09-25
这是本人在练习angular时，边学便用写的例子，文章参考http://blog.csdn.net/yiershan1314/article/details/78027872
angularJs demo 各种基本用法
08-29
angularJS router filter service diractive
angular1 demo
09-07
资源里面是我的github地址，请根据说明下载源码
AngularJs2 官网demo
09-13
angularJs2官网demo，使用方法:需要在本地安装npm,(https://nodejs.org/en/下载最新版本的nodeJs,保证node的版本高于等于v5.x.x，npm版本高于等于3.x.x),使用node -V或者npm -V检查版本。 下载文档之解压到某个目录，然后在此目录下执行npm start即可运行(依赖包不需要安装了) 如果在运行过程中出现问题，请给我留言 此案例基于angular2.0.0-rc6版本(也是当前最新版本)
AngularJS　初学者必看　带你认识AngularJS
Olivia_Yu_的博客
04-27 543
刚开始玩ＣＳＤＮ，博主是个闲不住的人，趁工作之余拼凑起来零零散散的小时光来个给有需要的博友门分享下关于Angularjs 今天先分享angular js入门 首先,AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。 AngularJS是一个基于MVC处理模式，实现了MVVM数据双向绑定的用于开发动态web项目的框架。 库 VS框架的区别 库：封装原生JavaScript实现的大量函数的集合，是提供了各种特定功能的函数库 通过引入的库中的函数，
[译] 使用angularjs创建一个CRUD应用
weixin_34062469的博客
09-28 187
原文地址：https://www.sitepoint.com/creating-crud-app-minutes-angulars-resource 大量的单页应用都有CRUD操作。如果你使用angularjs创建一个CRUD操作，那么你可以利用$resource服务的优势。$resource服务是建立在$http服务之上，并且可以使前后...
Angularjs4.0 创建新项目
liangxw1的专栏
07-17 3154
http://www.qinimai.com/topic/9.htmlAngular4 中常用的指令入门总结 http://www.jb51.net/article/115968.htm
Angularjs 学习笔记（一）基础
qq_25178609的博客
10-02 1654
1.简介： Angular JS (Angular.JS) 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它支持整个开发进程，提供web应用的架构，无需进行手工DOM操作。 AngularJS很小，只有60K，兼容主流浏览器，与 jQuery 配合良好。2 . AngularJS应用程序的三个组成部分，它们如何映射到模型-视图-控制器设计模式： 模板：是您用HTML和CSS编写
使用AngularJS制作一个购物车
最新发布
06-08
使用AngularJS制作一个购物车需要以下步骤： 1. 定义一个AngularJS app模块和controller控制器。 ```javascript var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { // 初始化购物车为空数组 $scope.cart = []; }); ``` 2. 在HTML中定义购物车的容器，并使用ng-repeat指令遍历购物车中的商品列表。 ```html <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="item in cart"> <div>{{item.name}}</div> <div>{{item.price}}</div> <div>{{item.quantity}}</div> <div>{{item.price * item.quantity}}</div> </div> </div> ``` 3. 在HTML中定义商品列表，并为每个商品添加一个“添加到购物车”的按钮。当用户点击按钮时，将该商品添加到购物车中。 ```html <div ng-app="myApp" ng-controller="myCtrl"> <div ng-repeat="product in products"> <div>{{product.name}}</div> <div>{{product.price}}</div> <button ng-click="addToCart(product)">添加到购物车</button> </div> <hr> <div ng-repeat="item in cart"> <div>{{item.name}}</div> <div>{{item.price}}</div> <div>{{item.quantity}}</div> <div>{{item.price * item.quantity}}</div> </div> </div> ``` 4. 在controller中实现addToCart()函数，用于将商品添加到购物车中。 ```javascript $scope.addToCart = function(product) { // 检查购物车中是否已存在该商品 var index = -1; for (var i = 0; i < $scope.cart.length; i++) { if ($scope.cart[i].name === product.name) { index = i; break; } } // 如果购物车中已存在该商品，则将商品数量加1 if (index !== -1) { $scope.cart[index].quantity++; } else { // 否则将商品添加到购物车中 $scope.cart.push({ name: product.name, price: product.price, quantity: 1 }); } }; ``` 这样就可以实现一个简单的购物车了。当然，你可以根据实际需求对代码进行修改和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值