<1>、ng-app指令定义一个 AngularJS 应用程序,通常我们将ng-app直接放在
<html ng-app="routerApp"></html>
这就告诉html是angularJs应用程序的所有者
<2>、ng-model 指令把元素值(比如输入域的值)绑定到应用程序(实现数据的双向绑定);
在输入框里面输入内容时,对应的class=“pid”里面的内容就会改变;
<div ng-app="">
<p>在输入框中尝试输入:</p>
<p>姓名:<input type="text" ng-model="name"></p>
<p class="pid">{{name}}</p>
</div>
也可以通过js操作改变输入框里面的内容
.controller('defaultController', function ($scope, $rootScope, $state, $stateParams, $cookieStore, ServiceList) {
$scope.saleattr = ["早餐", "中餐", "晚餐", "夜宵"];
$scope.activeMenu = 0;
$scope.name = "Fiona_lms"
$scope.setActive = function (menuItem) {
$scope.activeMenu = menuItem
$scope.loadsaletoday();
$scope.load();
}
}
这就是所谓的数据的双向绑定。
<3>、ng-bind 指令把应用程序数据绑定到 HTML 视图,(对变量进行初始化加载);
<4>、ng-bind-html指令用于绑定包含HTML标签的文档(解析其中的html标签),在使用该指令的时候,需要引入“angular-sanitize.js”进行安全绑定。
同时需要在模块里面配置“ngSanitize”服务,
我一直理解错了,我以为它是用来过滤html标签的,直到昨天遇到一个问题,当时我在后台取出的数据,里面包含很多html标签,我以为
sce.trustAsHtml()是用来过滤的,所以一直在错误的方向上找问题出在哪里,结果是可想而知的,没有找到答案,后来问师父了,师父立刻帮我把问题解决了,然后我还是很懵逼啊,今天下午不是特别忙,我还是很好奇这个问题,然后自己又重新试了一下,同时查阅了一些资料,知道了原来是这样的,加不加
sce.trustAsHtml(),就一个区别,如果标签上的样式是用style写的,如果不加的话 看,浏览器是解析不出来的,但是如果样式是用class写的,浏览器还是会解析出来。
<5>、ng-if指令是判断数据是否存在,在页面数据展示的时候,经常会用到
<div class="col-sm-6">
<div class="convincef">{{item.MaterialName}}</div>
<div class="convice_spam">
<span class="font_size" ng-if="item.SurplusQuantity">剩余:<span class="font_color">{{item.SurplusQuantity}}</span><span>{{item.UnitName}}</span></span>
<span ng-if="item.OrderLimitNumber">限购:<span class="font_color">{{item.OrderLimitNumber}}</span><span>{{item.UnitName}}</span></span>
</div>
<div ng-if="item.SellPrice" class="pic_img_bg"><span>¥{{item.SellPrice}}</span></div>
<div ng-if="!item.SellPrice">暂无价格</div>
</div>
<6>、ng-repeat指令是用来做循环的
<li ng-repeat="item in data" ng-controller="eachController">
<div class="convice_img"><img src="{{item.Img | IMG:true}}" /></div>
<div class="convincef">{{item.MaterialName}}</div>
</li>
<7>、ng-class指令不仅可以当类名来使用,后面还可以加表达式
<div class="input-check" ng-click="change($index)">
<i ng-class="{true: 'checkbox-selected', false: ''}[chose[$index]]"</i>
</div>
<div class="navtabs-secend">
<ul id="secendnav">
<li><a ui-sref="myspace.OrderManagement.orderlist" ng-class="{active:state.includes('myspace.OrderManagement')}"><div class="management"></div><p>订购管理</p></a></li>
<li><a ui-sref="myspace.HealthyDiet.DietRecommend" ng-class="{active:state.includes('myspace.HealthyDiet')}"><div class="healthydiet"></div><p>健康饮食</p></a></li>
</ul>
</div>
<8>filter:忽略后台数据里面的标签
.filter('to_trusted', ['$sce', function ($sce) {
return function (text) {
var dd = text.replace(/<\/?.+?>/g, "");
var dds = dd.replace(/ /g, "");
return dds
};
}]);
使用方法:
<div ng-bind-html="item.Content | to_trusted"></div>