angualr功能函数汇总

  • angular.fromJson
  • angular.toJson
  • angular.identify
  • ngBindTemplate
  • angular.fromJson
    把JsonString转化为对象或者对象数组
<!DOCTYPE html>
<html lang="en" ng-app="copyExample">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
    <button ng-click="parse()">点击我!</button>
</div>
<script>

    angular.module('copyExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.parse = function()
                {
                    var json = '{"name":"liSi", "password":"321"}';
                    var jsonArr = '[{"name":"zhangSan", "password":"123"},' +
                            '{"name":"liSi", "password":"321"}' +
                            ']';

                    var obj = angular.fromJson(jsonArr);
                    console.log(obj);

                    var objArr = angular.fromJson(jsonArr);
                    console.log(objArr[0].name);
                    console.log(objArr[1].password);
                }
            }]);
</script>
</body>
</html>
  • angular.toJson

从对象到json

<!DOCTYPE html>
<html lang="en" ng-app="copyExample">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="angular/angular.min.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
    <button ng-click="parse1()">点击我!</button>
</div>
<script>

    angular.module('copyExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.parse1 = function()
                {
                    var obj =
                    {
                        name:"liSi", password:"321"
                    };
                    var str = angular.toJson(obj, true);
                    console.log(str);
                }

            }]);
</script>
</body>
</html>

  • angular.identify
    函数返回本身的第一个参数, 这个函数一般用于函数风格
<!DOCTYPE html>
<html lang="en" ng-app="copyExample">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="angular/angular.min.js"></script>
</head>
<body ng-controller="ExampleController">
<div>
    <div>
        angular.identity
    </div>
    <div  >
        <input type="button" id="btn" ng-click="show()" value="answer" />
        :<input type="text" id="answer" ng-model="result" />
    </div>
</div>
<script>

    angular.module('copyExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
                $scope.result = "";
                $scope.double = function(n){
                    return n*2;
                }
                $scope.triple = function(n){
                    return n*3;
                }
                $scope.answer = function(fn, val){
                    return (fn || angular.identity)(val);
                }
                $scope.show = function(){
                    $scope.result = $scope.answer($scope.double, 3);
                    console.log($scope.result);
                }

            }]);
</script>
</body>
</html>

  • angular.noop
 function testCtrl() {
      var _console = function (v) {
          return v * 2;
      };
      var getResult = function (fn, val) {
          return (fn || angular.noop)(val);
      };
      var firstResult = getResult(_console, 3);//6
      var secondResult = getResult(null, 3);//undefined
      var thirdResult = getResult(undefined, 3);// undefined
    };
  • ngBindTemplate
    绑定多个模版
<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.salutation = 'Hello';
      $scope.name = 'World';
    }]);
</script>
<div ng-controller="ExampleController">
 <label>Salutation: <input type="text" ng-model="salutation"></label><br>
 <label>Name: <input type="text" ng-model="name"></label><br>
 <pre ng-bind-template="{{salutation}} {{name}}!"></pre>
</div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 通过AngularJS仿豆瓣一刻的案例:https://github.com/zhongxiaolian/doub...
    中小恋阅读 5,757评论 1 21
  • 1.函数声明和函数表达式有什么区别 (*) 区别: 函数声明后面的分号可加可不加,不加也不影响接下来语句的执行,但...
    Sheldon_Yee阅读 3,093评论 0 1
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,385评论 2 17
  • =========================================================...
    lavor阅读 8,842评论 0 5
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,401评论 1 10