angualrjs随笔记之常用标签_angular 循环可以不循环的标签-CSDN博客

本文链接：https://blog.csdn.net/qq_15076569/article/details/83476445

ng-app：定义大作用域

ng-controller：定义控制器范围的作用域

得到app对象：

var app = angular.module('pyg',[]);

得到controoler对象：

app.controller('goodsController' ,function($scope,uploadService,goodsService){...}

得到service对象：

app.service('goodsService',function ($http) {...}

表达式：

{{}} : 可以是$scope中的变量、方法，也可以进行数学运算

controller中定义方法和属性：

$scope.findAll=function(){}

$scope.name="zhangsan"

初始化：

<body ng-init="initFun()">...</body>

if标签：

<span ng-if="temp==1">...</span>

循环标签：

循环数组：$scope.entity.goodsDesc.itemImages=[];

<tr ng-repeat="image in entity.goodsDesc.itemImages">

<td>{{$index}}循环的角标</td>

<td>{{image.color}}</td>

</tr>

循环Map：$scope.searchMap.spec={key1:value1,key2:value2...}

<li class="tag" ng-repeat="(key,value) in searchMap.spec"></li>

src标签：

<img ng-src="xxx"/>

单击事件：

<a href="#" ng-click="add()">xxx</a>

select的循环标签：

$scope.itemCatList3=[]

<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCatList3"></select>

监听事件：

//监听$scope域中的entity.goods.category1Id的属性变化

$scope.$watch('entity.goods.category1Id',function (newValue,oldValue) { ...});

angular支持的select2：

引入文件：

<link rel="stylesheet" href="../plugins/select2/select2.css"/>

<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css"/>

<script src="../plugins/angularjs/angular.min.js"></script>

<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>



<input select2 select2-model="entity.typeId" config="typeList" placeholder="商品类型模板" class="form-control"/>

checkbox自身是否选中且设置选中的值ng-true-value：

<input type="checkbox" ng-true-value="1" ng-false-value="0" ng-click="updateSpecAttribute($event)">

$scope.updateSpecAttribute=function($event){

if($event.target.checked ){...}//true：选中

}

显示包含html标签的内容ng-bind-html：

/*$sce服务写成过滤器*/

app.filter('trustHtml',['$sce',function($sce){

return function(data){

return $sce.trustAsHtml(data);

}

}]);

$scope.item.title="<span style='color:red'>哈哈</span>"

<em ng-bind-html="item.title | trustHtml"></em>

angular.js会把显示的域内容只进行文本输出，页面不会对内容进行加载，显示item.title时会调用trustHtml过滤器，使用$sce会修改angular的安全策略，对页面内容让浏览器加载

页面接收参数$location标签：

A页面跳转B页面：

location.href="http://localhost:9105/search.html#?keywords="+$scope.keywords;

B页面接收A页面的参数keywords：

B页面的controller需要传入$location服务，search()就是获取url后面?的参数内容['keywords']获取keywords的key的值，但需要注意A跳转B页面的？前面必须加上一个#号，否则传递不过来

app.controller('searchController',function($scope,$location,searchService){

$scope.searchMap.keywords= $location.search()['keywords'];

}