angularjs -问题记录

1 如何根据条件设置特殊的Html标签

	<span class="li-title" ng-bind-html="obj.productName|replaceSearchChar:productName"> </span>     
app.filter('replaceSearchChar', function ($sce) { //可以注入依赖
                return function (text, searchChar) {
                    return $sce.trustAsHtml(text.replace(searchChar, "<span style=\"color:blue\">" + searchChar + "</span>"))
                }
            });

2  如何在http请求成功之后执行特定的代码

self.tableParams = new NgTableParams({'count': 10} , {
    getData: function (params) {
        var promise = $http.post("rest/staff/page", $scope.req);
        return promise.then(function (resut) {
            var response = resut.data;
            var total = response.otherData[0];
            params.total(total);
            return response.data;
        });
 
    }
});

 3 如何通过已经获得的数组列表数据循环显示标签

			<li  ng-repeat="obj in products"  >{{obj.a}}
<li>

4 如何通过条件选择是否展示标签

   <span  ng-if="obj.hotSort==0" >热销</span>
   <span  ng-show="hotSort" >热销</span>

5 如何通过条件选择展示的样式class

<li      ng-class="{true: 'active',false:''}[a==1]"></li>

6 如何用scope对象的属性展示图片

 <img   ng-src="{{obj.Pic}}"    >

7 点击方法

<div ng-click="a()"></div>

8 如何通过自定义指令方便的设置的所需div高度

	  		<div auto-height></div>
      
      app.directive('autoHeight', function ($window) {
                return {
                    restrict: 'A',
                    scope: {},
                    link: function ($scope, element, attrs) {
                        var winowHeight = $window.innerHeight; //获取窗口高度
                        var menuheight = (winowHeight - (7 * 16 * 0.75 + 133 + 40 - 2.7 * 16 * 0.75)) || 338;
                        element.css('min-height',
                                (menuheight + 'px'));
                    }
                };
            });

9 如何发起post请求，使得后台能够使用getParameter(name)获取

       return $http({
                        method: 'post',
                        url: 'a',
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                        transformRequest: function(obj) {
                            var str = [];
                            for(var p in obj){
                                str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                            }
                            return str.join("&");
                        },
                        data: {
                            ab: a
                        }
                    })

10 在不是控制器controller或者指令directive里面，添加$scope服务 

报错：UnKnown provider : $scopeProvider <- $scope <- myService 

错误原因：只有控制器和指令才有$scope，$scope在AngularJS里面充当数据模型，是视图和HTML间的桥梁，只有控制器和指令有作用域这个概念。

11 自定义服务service

      app.service("goodsSerivice", function ($http) {
                //获取商品系列
                this.getCatalogs = function ($scope, a) {
                    $http({
                        method: 'GET',
                        url: '222',
                        params: {
                            ab: a
                        }
                    }).then(function successCallback(response) {
                        $scope.catalogs = response.data.data;
   
                    });
                };
 
            });

12 如何对浮点数加减

 $scope.price= Number($scope.price) - 1

13 如何绑定from数据

       <form ng-submit="submit_form()">
            <input type="text" name="aaa" placeholder="商品名称：" ng-model="form.goods_name" />
            <input type="submit" name="" value="提 交" />
        </form>

14 判断是否数组

Object.prototype.toString.call(obj[p]) === '[object Array]'

15 POST方法传递数组属性

 $http({
                    method: 'post',
                    url: ' ',
                    data: form,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
                    transformRequest: function (obj) {
                        var str = [];
                        for (var p in obj) {
                            var val = encodeURIComponent(obj[p]);
                            if (Object.prototype.toString.call(obj[p]) === '[object Array]')
                            {
                                val=JSON.stringify(obj[p])
                            }
                            str.push(encodeURIComponent(p) + "=" + val);
                        }
                        return str.join("&");
                    }
                }).then(function successCallback(response) {
                  
                })

16 根据奇偶数显示li的样式

	<li    ng-repeat="obj in products" ng-class-even="'online'" ng-class-odd="'li'">

17当同时使用jquery-mobile的popup和angularjs给弹窗的表单赋值的时候的问题：

   $scope变量更新， view视图无更新

解决办法：把jquery方法弃用，采用angularjs的方法ng-show显示弹窗

18 如何在jquery内调用angularjs方法

1
 var controllerScope = $('div[ng-controller="ctrl"]').scope();  // Get controller's scope
3
var element = angular.element(document.getElementById("myApp"));  
// 通过app对象获取ctrl对象  
var controller = element.controller();  
// 通过ctrl对象获取$scope  
var scope = element.scope();  
3
var ctrl= document.querySelector('[ng-controller=ctrlName]');  
var scope = angular.element(ctrl).scope();  
// 获取当前元素的$socpe:   
angular.element(domElement).scope()   
// 获取当前app的injector：  
angular.element(domElement).injector()  
// 获取当前元素的controller：  
angular.element(domElement).controller()   

19 forEach的使用

angular.forEach(array,function(obj,index){
    doSomething();
})

20保留浮点数

<span style="margin-left: 1.5em;">￥{{obj.total| number:2}}</span

 21 如何在ng-reapt获取下标

ng-click="Save($index-1,$index)"

22返回指定元素的scope：

var sidebar = document.getElementsById('sidebar'); var scope = angular.element(sidebar).scope();

23 设置angularjs 的样式

<div   ng-style="dispatchStyle()">
   scope.dispatchStyle = function () {
        return {
    'height': dp_height + 'px' }};

24 统一配置post请求格式

     app.config([ '$httpProvider', function ($httpProvider) {
            $httpProvider.defaults.transformRequest =  function (obj) { 
                    var str = []; 
                    for (var p in obj) {
                        var val = encodeURIComponent(obj[p]);
                        if (Object.prototype.toString.call(obj[p]) === '[object Array]') {
                            val = JSON.stringify(obj[p])
                        }
                        str.push(encodeURIComponent(p) + "=" + val);
                    } 
                    return str.join("&");  }
            $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; }]);

25 传递json格式的对象数组到后台

  app.config(['$locationProvider', '$httpProvider', function ($locationProvider, $httpProvider) { 
            $locationProvider.html5Mode({ 
                enabled: true, 
                requireBase: false 
            });
            $httpProvider.defaults.transformRequest = function (obj) { 
                return JSON.stringify(obj);
            } 
            $httpProvider.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';
        }]);

26 传递formdata格式的时候，data里面不用填参数

$http({
                    method: 'post',
                    url: 'createGoods', 
                    data:$scope.form 
                })

angualrjs select 标签 ng-model绑定值要是字符串

<select    ng-model="GoodsIdd" ng-init="defaultGoodsIdd=GoodsId+''"  > </select>

28 使用http请求渲染select元素需要时间，如果要使用select2只能等元素加载完毕，暂时妥协解决办法，延时设置默认值

    setTimeout(function () {
                            $("#g").select2("val", + '11'); 
                        },200)

23过滤器不能用于ng-model，在输入框限制只能输入两位浮点数使用step

     <input type="number"    ng-model="price"   step="0.01">

参考文档：https://www.cnblogs.com/sxz2008/p/6430347.html