angularJs ng-options指令详解

ng-options一般有以下用法及其详解

数组:

  •  label for value in array
  •  select as label for value in array
  •  label group by group for value in array
  •  label disable when disable for value in array
  •  label group by group for value in array track by trackexpr
  •  label disable when disable for value in array track by trackexpr
  •  label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)

对象:

  •  label for (key , value) in object
  •  select as label for (key ,value) in object
  •  label group by group for (key,value) in object
  •  label disable when disable for (key, value) in object
  •  select as label group by group for(key, value) in object
  •  select as label disable when disable for (key, value) in object

选中:

ng-options的选中方式是根据ng-model而决定的,假如我们的对象是:

[{“value”:0,”name”:”否”},{“value”:1,”name”:”是”}]

那么ng-model对应的就是:

{“value”:0,”name”:”否”} 或者是 {“value”:1,”name”:”是”} 对象。

一个例子:

//The html code.
<select class="form-control" ng-model="selected" ng-options="n.name for (i,n) in defaultContent" ng-change="change(selected)"></select>

 

//and the js code.

.controller("testController",function($scope){

    /**
     * selected value.
     * @type {string}
     */
    $scope.content = "0";

    /**
     * select options object.
     */
    $scope.defaultContent = JSON.parse('[{"value":0,"name":"否"},{"value":1,"name":"是"}]');

    /**
     * foreach defaultContent and found the selected object.
     */
    for(i in $scope.defaultContent){

        /**
         * if defaultContent[i].value equals content,than the selected object is defaultContent[i].
         */
        if($scope.defaultContent[i].value == parseInt($scope.content)){
            $scope.selected = $scope.defaultContent[i];
            break;
        }
    }
    $scope.change = function(obj){
        log(obj)
    }
})
  • defaultContent是我们默认的下拉选择框的对象数组。
  • content是下拉选择框选中value的值
  • 经过遍历数组,找出选中值的对应对象复制给新申明的选中对象selected。
  • html代码ng-model赋值selected就可以了。

AngularJS使用ng-repeat不更细View

今天在使用angularJS开发一个上传图片的功能,但是遇到了view不更新的问题,查了国内大部分网站,发现很多人都出现过这个问题,但是他们一般都是出现在请求数据中,我的项目全部都是使用promise对象处理的,所以没有出现过他们出现的问题,但是上传图片是没有数据传输的(因为我意图是在本地裁剪图片);

如果有像我这样子的,可以使用:

$scope.$apply();
通知视图更新,但是这不是一个好的习惯。

原文:
$scope.$apply(function() {
  $scope.msgs = newMsgs;
});

That is telling Angular that you’ve modified something it needs to know about from a context that it doesn’t know about (the jQuery ajax call in this case).

There are some valid uses of $scope.$apply(), such as in event handlers, but most other times it is a sign of bad practices. You should definitely be using Angular’s $http for ajax calls.

 

 

 

angularJS移动应用触摸touch事件

首先我们定义一个指定(directive),如下面代码:

.directive('myTouchEven', ['$swipe', "$rootScope", function ($swipe, $rootScope) {
    return {
        restrict: 'EA',
        link: function (scope, ele, attrs, ctrl) {
            var startX, pointY;
            $swipe.bind(ele, {
                'start': function (coords) {
                    startX = coords.x;
                    pointY = coords.y;
                    c("startX:" + startX + "pointY:" + pointY)
                },
                'move': function (coords) {
                    var a = coords.x - startX;
                    if (a < -100 && a > -110) {
                        startX = coords.x;
                        $rootScope.$broadcast("TouchEven", "back");
                    } else if (a > 100 && a < 110) {
                        startX = coords.x;
                        $rootScope.$broadcast("TouchEven", "next");
                    }
                    c("move:" + a + " coords.x:" + coords.x)

                },
                'end': function (coords) {
                    c("end")
                    c("endX:" + coords.x + "endY:" + coords.y)
                },
                'cancel': function (coords) {
                    c("cancel")
                }
            });
        }
    }
}])

这里使用$swipe来帮顶触摸事件,在start事件中记录开始点击的坐标值(x、y)的数据;然后我们监控move事件,计算当前的坐标值(x、y)于开始点击的坐标值相差是多少,如果大于或者小于我们设定的数值,那么则发送一个全局广播,这里注入了$rootScope,用来发送全局广播($broadcast),其他指令(directive)、服务(service)、控制器(controller)等只要注册了(TouchEven)广播监听,就能接收到我们发送的广播事件,下面是示例代码:

.controller("ListController", function ($scope, $routeParams,ajax) {
    $scope.pages = 1;

    $scope.$on("TouchEven",function(a,b){
        var is_send = null;
        if(is_send == null){
            is_send = 1;

            if(b == "back"){
                $scope.pages -= 1;
            }else if(b == "next"){
                $scope.pages += 1;
            }

            ajax.get("/api/v1/articleList",{pages:$scope.pages})
                .success(function(data){
                    is_send = null;
                    c(data)
                    /**
                     * write something code.
                     */

                })
                .error(function(err){
                    is_send = null;
                    toast(err.response_err)
                    /**
                     * write something code.
                     */
                })


        }


    });
    
})

 

 

angularJS开发promise对象使用方法

创建一个服务对象:

.factory("UserSerice",function($q,$http,ajax){
    var _url = '/api/v1/user/';

    return {
        get:function(id,param){
            var defer = $q.defer();
            $http.get(ajax.parseParam(_url + id,param))
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        },
        save:function(param){
            var defer = $q.defer();
            $http.post(_url,param)
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        },
        put:function(id,param){
            var defer = $q.defer();
            $http.put(_url + id,param)
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        }

    }
})

 

服务包含增改查,3种方法,下面是使用方法:

.controller("controllerMain", function ($scope,UserSerice) {
    var user_promise;
    $scope.get = function () {
        c($scope.user_id)
        user_promise = UserSerice.get($scope.user_id,{});
        user_promise.then(function(data){
            c("user_promise:succ")
            c(data);

        },function(data){
            c("user_promise:err")
            c(data);

        });


    }

    $scope.save = function () {
        user_promise = UserSerice.save({user_name:$scope.user_name,user_pwd:$scope.user_pwd,email:$scope.email});
        user_promise.then(function(data){
            c("save:user_promise:succ")
            c(data);
            if(data.response_code == 1){
                $scope.user_id = data.user_id;
            }

        },function(data){
            c("save:user_promise:err")
            c(data);

        });

    }

    $scope.put = function () {

        user_promise = UserSerice.put($scope.user_id,{user_name:$scope.user_name,user_pwd:$scope.user_pwd,email:$scope.email});
        user_promise.then(function(data){
            c("put:user_promise:succ")
            c(data);

        },function(data){
            c("put:user_promise:err")
            c(data);

        });

    }

})

 

AngularJS中$http、$httpProvider、$resource操作笔记

1.设置httpProvider头

var app = angular.module(“Myapp”, [‘ngRoute’])
.config([‘$locationProvider’,’apikey’,function($locationProvider,apikey){
$locationProvider.html5Mode(false);
$locationProvider.hashPrefix(“!”)
}])
.config(function ($routeProvider,$httpProvider) {
//设置http头
$httpProvider.defaults.headers.common[“X-Response-Code-By”] = “Angular1.3.8″;

关于深蓝

仅仅是一个对编程很有爱好的人.
Copyright © 2008-2016 lanxinbase.com Rights Reserved. | 粤ICP备14086738号 |