『壹』 如何用angularjs实现抛物线购物车效果
、使用任何语言创建一个服务端：
public class ShoppingCar
{
public string Title { get; set; }
public decimal UnitPrice { get; set; }
public int Count { get; set; }
}
public ActionResult GetCar()
{
List<ShoppingCar> cars = new List<ShoppingCar>
{
new ShoppingCar { Title="苹果",Count=1,UnitPrice=2.5m},
new ShoppingCar { Title="香蕉",Count=3,UnitPrice=1.5m},
new ShoppingCar { Title="苦瓜",Count=1,UnitPrice=3.5m},
new ShoppingCar { Title="黄瓜",Count=3,UnitPrice=2.2m}
};
return Json(cars,JsonRequestBehavior.AllowGet);
}
『贰』 angularjs 通过ng-repeat显示双重菜单，怎么解决
解决办法:直接网络一下就知道了
『叁』 angular js 带复选框购物车怎么写
前段时间研究过这个，并且写了一个购物车的小例子，今天一个偶然的机会提起，可惜忘了差不多了，糊里糊涂的也没说清楚。翻出来，提醒下自己，保持一颗学习的心，顺便再复习一遍。
先上一个最终的效果图
构图比较简单，主要功能：
1. 点击购买的时候 进行数量的增加或者条目的增加，同时总价格变化；
2. 进行删除的时候，删除当前条目，总价变化；
3. 进行数目增加减少的时候，总价格变化；
好，下面说代码，抓耳挠腮的想想，有点久远印象不太深刻了；
关于angular的基本用法，这里就不唠叨了，网上好多的教程；
首先是商品列表，这里自己随意列举了一些
<script>
var items = [{
id : '1',
name : '蜂蜜',
price : 30.00
},{
id : '2',
name : '黄豆酱',
price : 15.8
},
{
id : '3',
name : '护手霜',
price : 15.00
},
{
id : '4',
name : '保温杯',
price : 29.9
},
{
id : '5',
name : '鼠标',
price : 39.9
},{
id : '6',
name : '米老头',
price : 8.8
}];
//购物车中的数据;
var boughtList = {};
</script>
主要的html代码，重新注释下也让自己再熟悉一遍
<div class="wrap" ng-controller="showItem"><!-- ng-controller ng的语法 -->
<h5>商品列表</h5>
<div class="left itembox border" >
<ul>
<li class="left" ng-repeat="value in items" item-id={{value.id}}>
<p>{{value.name}}</p>
<p> {{value.price}}</p>
<p>
<a href="javascript:void(0);" ng-click="buyAction($event);"
name={{value.name}} price={{value.price}} item-id={{value.id}} >购买</a>
<!-- dom 事件时的$event 就相当于普通dom事件中的window.event 对象-->
</p>
</li>
</ul>
</div>
<!-- 购物车中的数据 -->
<div class="boughtlist border">
<ul>
<li ng-repeat="value in boughtList" item-id={{value.id}}>
<span>{{value.name}}</span>
<span>{{value.price}}</span>
<span style="width:100px;" item-id={{value.id}}>
<a href="javascript:void(0);" ng-click="value.num=value.num+1;changeNum($event,value.num);" >+</a>
<input class="border" type="number" min=0 ng-model="value.num" ng-init="value.num=1" ng-change="changeNum(value.id,value.num);"/>
<!-- 这里的ng-change 是值发生变化时触发的事件，其实这里我原先想处理成 一个自动的mvc过程，无果，只好加事件了-->
<a href="javascript:void(0);" ng-click="value.num=value.num-1;changeNum($event,value.num);">-</a>
</span>
<a href="javascript:void(0);" item-id={{value.id}} ng-click="delItem($event);" >删除</a>
</li>
</ul>
<p ng-init=0 >总价格：{{ total | number:1}}</p>
<!-- angular的优势体现，number：1也就是number数据，小数点后一位。-->
</div>
我记得，当时觉得比较麻烦的是 input没有ng-blur事件；
看下js代码
var ng = angular;
var myapp = ng.mole('myapp',[]);
var common = {
getTotal : function(total){ //每次重新清零 算出总价，这样的话为什么还要传total参数？当时怎么想的？
total = 0;
for(var k in boughtList){
if(boughtList[k]){
if(boughtList[k].num <=0){
boughtList[k].num = 0;
}
total += boughtList[k].num*boughtList[k].price;
}
}
return total;
}
}
myapp.controller('showItem',function($scope){
$scope.items = items;
$scope.boughtList = boughtList;
$scope.total = 0;
for(var k in boughtList){
if(boughtList[k]){
$scope.total += boughtList[k].num*boughtList[k].price;
}
}
$scope.buyAction = function($event){
var el = $event.target;
var id = el.getAttribute('item-id');
if(boughtList[id]){
boughtList[id].num += 1;
}else{
var arr = [];
arr.name = el.getAttribute('name');
arr.price = el.getAttribute('price');
arr.num = 1;
arr.id = id;
boughtList[id] = arr;
}
$scope.total = common.getTotal($scope.total);
}
$scope.delItem = function($event){
var li = $event.target.parentNode;
li.parentNode.removeChild(li);
var id = $event.target.getAttribute('item-id');
if(boughtList[id]){
delete boughtList[id];
}
$scope.total = common.getTotal($scope.total);
}
$scope.changeNum = function($event,num){
var id;
if(typeof $event == 'string'){
id = $event;
}else{
id = $event.target.parentNode.getAttribute('item-id');
}
boughtList[id].number = num;
$scope.total = common.getTotal($scope.total);
}
});
『肆』 angularjs 可以从ng-repeat中循环出五条数据吗
循环输出列表很多项目在web服务端做，前端做好模版后后端写jsp代码，双方需要紧密合作，分清责任。有些项目由后端提供restful方法，前端用ajax调用自己循环，这种一般是大把的jquery拼字符串，太不直观，有人搞出了js模板，也没好到哪里去。
用AngularJS就爽多了，语法和JSP类似：
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>ng-repeat directive</title>
</head>
<body>
<table ng-controller="CartController">
<caption>我的购物车</caption>
<tr>
<th>序号</th>
<th>商品</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
<tr ng-repeat="item in items">
<td>{{$index + 1}}</td>
<td>{{item.name}}</td>
<td>{{item.price | currency}}</td>
<td><input ng-model="item.quantity"></td>
<td>{{item.quantity * item.price | currency}}</td>
<td>
<button ng-click="remove($index)">Remove</button>
</td>
</tr>
</table>
<script src="../lib/angularjs/1.2.26/angular.min.js"></script>
<script>
function CartController($scope) {
$scope.items = [
{name: "雷柏（Rapoo） V500 机械游戏键盘 机械黄轴", quantity: 1, price: 199.00},
{name: "雷柏（Rapoo） V20 光学游戏鼠标 黑色烈焰版", quantity: 1, price: 139.00},
{name: "AngularJS权威教程", quantity: 2, price: 84.20}
];
$scope.remove = function (index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
ng-repeat指令生命在需要循环内容的元素上，items和控制器上的变量名对应，item是为数组中单个对象起的别名。$index可以返回当前引用对象的序号，从0开始，另外还有$first、$middle、$last可以返回布尔值，用于告诉你当前元素是否是集合中的第一个中间的最后一个元素。
『伍』 angularjs中有没有求和的
刚刚试了一下 model-1 --model2能算出两个数的和！
代码回如下答：
<div ng-controller="contro">
<input type="text" ng-model="numa" />
<span>+</span>
<input type="text" ng-model="numb"/>
<p>{{numa -- numb}}</p>
<h1></h1>
</div>
『陆』 angularjs里的watch怎么使用
体验总结：
对于Smartwatch×5的亮点，笔者觉得最大的意义在于其基于原生态安卓系统开发的功能以及应用，是目前国产智能手表中最接近智能手机的，所以算得上智能手表的里程碑之作，当然也少不了缺点，总的说来瑕不掩瑜，更为重要的是，在接下来的型号更新中，相信大有可为。
在优点方面;
1、 功能无限接近手机：接打电话、上网、接收短信、停车计时、新闻浏览、股市监测等，同时拥有智能手表测心率、计步、看天气、GPS定位等功能；
2、 系统比较稳定，这是很多智能手表无法比拟的，聪明的智能手表工程师则采用藏拙策略，体验不好的不放出来；急于求成的则冒险的将不成熟的功能放出来，对消费者是否公平，自有定论；
3、 硬件以及续航都属于中上等，比起国产智能手表，还是领先一步；
4、 对用户人群的定位以及附加应用比较到位，如前文所说，Smartwatch直至商务达人，在满足商务达人日常工作需要的同时还增添一些精准的服务；
5、 在快捷键设置方面，Smartwatch显然考虑到了手表的应用场景，不可能一直在屏幕上划来划去，除了屏幕的快捷方式，三个按钮其实都承担着快捷键方式，中间的开关机键在亮屏状态下短按两秒会有声音开关、屏幕亮度以及翻腕亮屏、关掉电源和省电模式快捷方式，所以很多功能只需要两步即可。
附带艾尔仑Smartwatch×5详细参数
系统： Android4.4
RAM:512MB
ROM:4G
可用内存：2G
协处理器： sensor hub
网络：中国移动/中国联通
SIM卡：Nano SIM
屏幕：1.4°全视角/400×400/Retina 16Million color/392PPI
连接：USB/蓝牙/WiFi
无线网：WiFi/WCDMA 3G/GPRS
免提：支持
多媒体：音乐、视频、录音
GPS：支持
功能：独立通讯、手机蓝牙通知、心率、运动计步、无线上网等
电池容量：450mAh
待机时间：72小时
表盘材质：316L不锈钢亚面砂
表带材质：牛皮
重量：90g
『柒』 angularjs repeat 表格头部怎么设置
JavaScriptObject本身就不会保证key之间的排序（.e,object,orfunction）但在目前的modernbrowsers，现实是这样的:……嗯，先卖个关子，我们拿你的例子，来试一段代码：varalphaPrefixedRecords={"y2013":'whatever',"y2016":'whatever',"y2012":'whatever'};varnumAlphaRecords={"2013y":'whatever',"2016y":'whatever',"2012y":'whatever'};varpureNumRecords={2013:'whatever',2016:'whatever',2012:'whatever'};varnumStringRecords={"2013":'whatever',"2016":'whatever',"2012":'whatever'};varfloatNumRecords={20.13:'whatever',20.16:'whatever',20.12:'whatever'};varfloatStringRecords={"20.13":'whatever',"20.16":'whatever',"20.12":'whatever'};//insertallkeysintoanarraybased//(obj){varkey,i=0;vararr=[];for(keyinobj){if(obj.hasOwnProperty(key)){arr.push(key);i=i+1;}}returnarr;}console.log('fuckepbyJS:')console.log('purenumkeys:',iterateKey(pureNumRecords));console.log('numstringkeys:',iterateKey(numStringRecords));console.log('basedonorderofdefinition:')console.log('alphaprefixedkeys:',iterateKey(alphaPrefixedRecords));console.log('numalphakeys:',iterateKey(numAlphaRecords));console.log('floatnumkeys:',iterateKey(floatNumRecords));console.log('floatstringkeys:',iterateKey(floatStringRecords));输出：fuckepbyJS:purenumkeys:["2012","2013","2016"]numstringkeys:["2012","2013","2016"]basedonorderofdefinition:alphaprefixedkeys:["y2013","y2016","y2012"]numalphakeys:["2013y","2016y","2012y"]floatnumkeys:["20.13","20.16","20.12"]floatstringkeys:["20.13","20.16","20.12"]结论是什么呢？1.对于类型是number或可转换为整数number的string类型的key，forin无论如何都会按照number的大小排序，这类似于数组的行为。2.对于alphanumericalstring类型的key，forin会按照定义object时的key顺序排列。Angular可能会做一些内部排序，但是你也看出来了，依靠objectkey实现排序的做法是不可靠的。即使你是JSninja，写出一段高深莫测的代码，你以后自己看到了都会想我艹这什么鬼。所以少年，对于你这种年份的usecase，还是乖乖地改成数组，然后手动order吧。
『捌』 微信小程序可不可以引入angularjs
微信小程序其实就是内置于微信里的APP。比如现有微信里的滴滴打车，就是小程序雏形，这样用专户如果想用滴属滴打车，就不需下载了，只需要关注滴滴打车的小程序就可。现在微信小程序推出，你可以先搭建好自己的应用，为微信小程序的推出做准备
『玖』 如何看待 Angular 2.0 使用的 AtScript 是 TypeScript 的超集
AtScript这门语言是由Google的Angular团队创建的，最直接的目的是用于编写Angular2.0，注意这里为什么说Angular，而不是说AngularJS，是因为Angular还存在一个Dart版本，也就是AngularDart。当前版本的Angular是需要维护JavaScript和Dart两套代码的，在2.0中，就只会有一套了。
有时候会觉得国外大公司真是小题大做，为了一个应用框架而创建一门新语言，听上去很不可思议，但认真想想，这里面有很多权衡。
既然谈AtScript，就免不了要谈Angular2.0，这是超越1.x版本的一次彻底革新。这么激进的革新，出发点在哪里呢？除了解决自身的一些问题，更重要的意义在于对未来标准的迎合，这些标准主要包括：
- mole
- Web Components
- class
- observe
- promise
mole的问题很好理解，JavaScript第一次有了语言上的模块机制，而Web Components则是约定了基于泛HTML体系构建组件库的方式，class增强了编程体验，observe提供了数据和展现分离的一种优秀方式，promise则是目前前端最流行的异步编程方式。
从以上几个方面，我们可以很清楚地看到这些东西想要解决的问题，那就是：Web应用的大型化。何谓大型化？这个大，更多指的是高楼大厦之大，而不是一大片园林的大。
最近这些年我们也可以看出，整个Web生态是逐步向应用化倾斜的，越来越大比例的Javascript代码被用于构建应用型网站，或者各类本地应用，Hybrid应用，而不是展示型网站。之前版本的JavaScript在构建大型Web应用的过程中，是存在一定不足的。
我曾经有个比喻，把Java、C#这类东西比喻成钢筋混凝土，JavaScript比喻成竹木，两者各有其适合的领域，其中也有重叠。亭台楼阁，轻灵精巧，如果不用竹木搭建，遍身都是土气。如果盖摩天大楼，也硬要用竹木搭建，恐怕不太合适。
我们现在所看到的绝大多数JavaScript应用的规模都严重偏小，传统软件厂商做出的Office，PhotoShop，AutoCAD，Matlab，还有魔兽、文明这类大型游戏，如果想要用任何一种脚本语言去实现，都会面临很多困难，那就是大规模协作的不便利性。
人类工业史上有不少优秀产品，易于生产，经久耐用，比如桑塔纳轿车，比如AK47突击步枪，这类产品的共同特点是皮实，不容易坏，即使坏了也容易修。在工业时代，组织任何领域的大型工程，都应当尽量把实现搞得简单一些。
所以从这个角度可以解释Java的流行，尽管黑它的人很多，但它在大型软件的协作中，确实有独特的优势。只需经过较少的培训，就可以上手使用，出现问题也容易定位，大型软件的开发过程就需要这个。
『拾』 angular路由 angular-ui-router 的api 求助
我们看到这项技术已经应用在了许多的网页上。比如购物车，注册表单，入职流程以及许多多步表单，让用户更容易在线填写表单。 下面我们将构建它： 使用UI Router，它能内嵌状态，为每个状态显示不同的view,我们能让多步表单变得相当的容易。 为了快速的理解UI Router是怎样工作的，看我们的文章：AngularJS使用UI-Router路由 让我们言归正传，开始创建我们的最棒的表单！ 创建工程 创建工程有个模板结构/bootswatch/3/ajax/libs/angularjs/1/ajax/libs/angular-ui-router/0/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script> <script src="app.js"></script> </head> <!-- apply our angular app --> <body ng-app="formApp"> <div class="container"> <!-- views will be injected here --> <div ui-view></div> </div> </body> </html> 完成所有文件的引入后，让我们进入 app.js 开始创建Angular应用和最基本的路由配置。 注意我们是如何把Angular App (formApp) 应用到 body 上面的。 创建我们的Angular App app.js 现在我们来创建应用和路由。 在一个大型应用中， 你肯定希望把你的Angular应用、路由、控制器分布到它们各自的模块中，但是为了完成我们的简单用例，我们将把它们都放到app.js这个欢乐的大家庭中。 现在我们拥有了一个已经注入了ngAnimate和ui.router的应用。 我们同样也建立了相应的路由。注意我们是如何为每一个视图区域定义 url，视图文件(templateUrl) 和 控制器的。 form 将是我们的主视图区域。它同样有一个以 . 分割的子视图区域 form.profile。这种想法能实现在应用状态发生变化时（译者：可能是路由、queryString等），子视图将会在主视图区域中显示出来。（译者：而且可以作到仅更新子视图区域变化，记录子视图区域状态）。 我们将在下一节中进行演示。 现在我们需要为form以及它的子视图区域创建视图。 让我们从新建form.html开始。这个文件将会在我们剩下的表单视图文件中充当模板的作用，正如index.html被用作整个项目的总体模板一样。我们所要作的是在该文件中包含ui-view，这样可以使嵌套声明知道该在何处注入他们的视图。 <!-- form.html --> <div class="row"> <div class="col-sm-8 col-sm-offset-2"> <div id="form-container"> <div class="page-header text-center"> <h2>Let's Be Friends</h2> <!-- the links to our nested states using relative paths --> <!-- add the active class if the state matches our ui-sref --> <div id="status-buttons" class="text-center"> <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a> <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a> <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a> </div> </div> <!-- use ng-submit to catch the form submission and use our Angular function --> <form id="signup-form" ng-submit="processForm()"> <!-- our nested state views will be injected here --> <div id="form-views" ui-view></div> </form> </div> <!-- show our formData as it is being typed --> <pre> {{ formData }} </pre> </div> </div> 注意我们是如何第二次在项目中使用ui-view的。这就是UI Router伟大的地方：我们可以嵌套声明和视图。这能够在我们开发应用时提供给我们非常多的灵活性。关于UI Router视图的内容，请参见 官方文档。 添加基于状态的激活类 我们希望每一个状态按钮能够在他们被激活时展示。为了达到这个效果，我们将会使用UI Router提供的ui-sref-active。如果ui-sref和当前状态一致，则会添加我们指定的类。 为了给自己的表单添加验证，请参见AngularJS表单验证。 现在，你可能想知道我们的表单究竟看起来是什么样子。让我们打开浏览器看一眼。 目前为止，我们并没有完全按照希望的那样得到所有的内容，但是这是一系列伟大事情的开端。让我们继续前进，添加一点样式，之后会添加一些嵌入视图和注释。 基础Stylingstyle.css 我们将设计我们的form-container和status-buttons来是我们的表单看起来更好。 /* style.css */ /* BASIC STYLINGS ============================================================================= */ body { padding-top:20px; } /* form styling */ #form-container { background:#2f2f2f; margin-bottom:20px; border-radius:5px; } #form-container .page-header { background:#151515; margin:0; padding:30px; border-top-left-radius:5px; border-top-right-radius:5px; } /* numbered buttons */ #status-buttons { } #status-buttons a { color:#FFF; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-transform:uppercase; } #status-buttons a:hover { text-decoration:none; } /* we will style the span as the circled number */ #status-buttons span { background:#080808; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; border-radius:50%; } /* active buttons turn light green-blue*/ #status-buttons a.active span { background:#00BC8C; } 现在我们的按钮更好看了并且更符合我们想要的了，接下来我们看下嵌套视图。 嵌套视图form-profile.html, form-interests.html, form-payment.html 这部分会比较简单。我们将定义不同的带有我们需要的输入框的视图。并且将他们绑定到formData对象以便我们能看到输入的数据。 下面是我们用于嵌套视图的视图文件： 表单概要视图 <!-- form-profile.html --> <div class="form-group"> <label for="name">Name</label> <input type="text" class="form-control" name="name" ng-model="formData.name"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" ng-model="formData.email"> </div> <div class="form-group row"> <div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.interests" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </div> </div> 表单兴趣视图 <!-- form-interests.html --> <label>What's Your Console of Choice?</label> <div class="form-group"> <div class="radio"> <label> <input type="radio" ng-model="formData.type" value="xbox" checked> I like XBOX </label> </div> <div class="radio"> <label> <input type="radio" ng-model="formData.type" value="ps"> I like PS4 </label> </div> </div> <div class="form-group row"> <div class="col-xs-6 col-xs-offset-3"> <a ui-sref="form.payment" class="btn btn-block btn-info"> Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span> </a> </div> </div> 表单支付视图 <!-- form-payment.html --> <div class="text-center"> <span class="glyphicon glyphicon-heart"></span> <h3>Thanks For Your Money!</h3> <button type="submit" class="btn btn-danger">Submit</button> </div> 既然我们已经定义了这些视图，那么当我们浏览表单时，他们就会显示出来。同样我们用下一个按钮和ui-sref来连接每一个新视图. 当使用ui-sref时，你要连接到你路由中定义的state而不是URL。然后Angular会使用这个来为你构建href。 下面是我们表单目前的每一个页面。 为了让我们的页面不同寻常，让我们加上动画效果。 让我们的表单产生动画效果 因为在项目开始的时候，我们已经加载了ngAnimate，它已经添加到需要动画的的类上了。当视图进入或退出的时候，它将自动添加类ng-enter和ng-leave。 现在我们所有做的就是通过样式形成我们最终的表单。为了理解Angular动画，这篇文章是一个很好的起点。 让我们进去css文件，将动画，并应用到我们的表单上 /* style.css */ /* ANIMATION STYLINGS ============================================================================= */ #signup-form { position:relative; min-height:300px; overflow:hidden; padding:30px; } #form-views { width:auto; } /* basic styling for entering and leaving */ /* left and right added to ensure full width */ #form-views.ng-enter, #form-views.ng-leave { position:absolute; left:30px; right:30px; transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; } /* enter animation */ #form-views.ng-enter { -webkit-animation:slideInRight 0.5s both ease; -moz-animation:slideInRight 0.5s both ease; animation:slideInRight 0.5s both ease; } /* leave animation */ #form-views.ng-leave { -webkit-animation:slideOutLeft 0.5s both ease; -moz-animation:slideOutLeft 0.5s both ease; animation:slideOutLeft 0.5s both ease; } /* ANIMATIONS ============================================================================= */ /* slide out to the left */ @keyframes slideOutLeft { to { transform: translateX(-200%); } } @-moz-keyframes slideOutLeft { to { -moz-transform: translateX(-200%); } } @-webkit-keyframes slideOutLeft { to { -webkit-transform: translateX(-200%); } } /* slide in from the right */ @keyframes slideInRight { from { transform:translateX(200%); } to { transform: translateX(0); } } @-moz-keyframes slideInRight { from { -moz-transform:translateX(200%); } to { -moz-transform: translateX(0); } } @-webkit-keyframes slideInRight { from { -webkit-transform:translateX(200%); } to { -webkit-transform: translateX(0); } } 首先，确定视图离开或进去时，表单的样式，他们是绝对定位的。需要确认当视图进入的时候一个视图不会放到另一个视图的下面。 其次，应用我们的动画到.ng-enter和.ng-leave类 第三，用@keyframes定义动画。所有这些部分组合到一起，我们的表单就有了Angular动画，基于状态的UI Router和Angular数据绑定。 以上所述是小编给大家分享的AngularJS 使用 UI Router 实现表单向导的相关知识，希望对大家有所帮助。