javascript - 我的AngularJs代码无法正常运行,出现此错误-TypeError:无法读取未定义的属性'#<Object>'-LMLPHP _>我需要的输出是....当我尝试运行代码时,它无法正常工作,当我使用for循环以html格式打印结果时,当我尝试更改自己的代码时,代码概念到angularjs我不能调用它说obj,#Object的值未定义并得到多个错误


  我正在分享我的代码


HTML:

<!DOCTYPE html>
<html ng-app="inputs">

  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">

<div id="result" style="width:600px; text-transform: capitalize;" align="right">Heloo</div>

<div ng-repeat="component in components">


{{mylogic(component)}}

</div>


JS:

var app = angular.module("inputs",[]);

app.controller("MainCtrl",function($scope){

$scope.components=[{
  'name':{
    'fname':'{"placeholder":"First Name","description":"Enter First Name of the user","value":"abc","type":"text"}',
    'lname':'{"placeholder":"Second Name","description":"Enter Last Name of the user","value":"ddd","type":"text"}'
  },
  'password':'{"placeholder":"Password","description":"Enter password","value":"","type":"password"}',
  'dim':{
    'dim2':{
      'dim3':'{"placeholder":"Sample","description":"Enter sample text","value":"ssds"}'
    }
  },
  'ary':{
    'ar10':{
      'ary2':{
        'ary3':'{"placeholder":"Sample","description":"Enter sample text","value":"acb"}'
      }
    },
    'ary11':''
  }
}];

 var result='';


 $scope.mylogic=function(obj,source){
 /*  console.log(source);*/
  /*console.log(obj,source);
  console.log(typeof source[obj] );*/
   if(typeof source[obj]=='string'){
     var val=[];
      if(source[obj]!=""){
    val =JSON.parse(source[obj]);
      return  obj +' <input type="'+val.type+'" value="'+val.value+'" placeholder="'+val.placeholder+'" type="text" ><br><code>Notes* '+val.description+'</code> <hr>';
     }else{
      return  obj +' <input placeholder="'+obj+'" type="text" > <hr>';
     }
   }else{  // console.log( components[obj] );
     var subObj=source[obj]; var tempObj=[];
      for(item in subObj ){
       // console.log(item,'--',subObj);
       tempObj.push(obj+' > ' +mylogic(item,subObj)  );
      }
     return tempObj;

     /* console.log(tempObj);*/
   }
}

/*for(component in $scope.components){
  result+= mylogic(component,$scope.components);
   console.log('Component',$scope.components[component]);
   console.log(result+= mylogic(component,$scope.components));
   console.log(mylogic);
}
*/
// console.log('Component',$scope.components[component]);
var res=document.getElementById('result');
res.innerHTML=result;
});

最佳答案

var app = angular.module("inputs", []);
app.filter('unsafe', function($sce) {
    return $sce.trustAsHtml;
});
app.controller("MainCtrl", function($scope, $sce) {

    $scope.components = [{
        'name': {
            'fname': '{"placeholder":"First Name","description":"Enter First Name of the user","value":"abc","type":"text"}',
            'lname': '{"placeholder":"Second Name","description":"Enter Last Name of the user","value":"ddd","type":"text"}'
        },
        'password': '{"placeholder":"Password","description":"Enter password","value":"","type":"password"}',
        'dim': {
            'dim2': {
                'dim3': '{"placeholder":"Sample","description":"Enter sample text","value":"ssds"}'
            }
        },
        'ary': {
            'ar10': {
                'ary2': {
                    'ary3': '{"placeholder":"Sample","description":"Enter sample text","value":"acb"}'
                }
            },
            'ary11': ''
        }
    }];

    var result = '';


    $scope.mylogic = function(obj, source) {
        if (typeof source[obj] == 'string') {
            var val = [];
            if (source[obj] != "") {
                val = JSON.parse(source[obj]);
                var res = obj + ' <input type="' + val.type + '" value="' + val.value + '" placeholder="' + val.placeholder + '" type="text" ><br><code>Notes* ' + val.description + '</code> <hr>';
                return res;
            } else {
                var res = obj + ' <input placeholder="' + obj + '" type="text" > <hr>';
                return res;
            }

        } else { // console.log( components[obj] );
            var subObj = source[obj];
            var res = '';
            for (item in subObj) {
                // console.log(item,'--',subObj);
                res += obj + ' > ' + $scope.mylogic(item, subObj);
            }
            return res;
        }
    }
})

<html ng-app="inputs">

<head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
</head>

<body ng-controller="MainCtrl">

    <div id="result" style="width:600px; text-transform: capitalize;" align="right">Heloo</div>

    <div ng-repeat="component in components">
        <div ng-repeat="(key, value) in component" ng-bind-html="mylogic(key,component) | unsafe">

        </div>
    </div>

    </div>
    </body>

</html>





核实

07-24 09:47
查看更多