_>我需要的输出是....当我尝试运行代码时,它无法正常工作,当我使用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>
核实