AngularJs在选择框中添加选项

Question

我是AngularJs的新手。我在添加选项以选择由JavaScript创建的框时遇到问题。以下是我的代码。

var inputElements = $('<div><label style="float:left;">' + i + '</label><select ng-model="object" class="form-control sel" style="width:300px; float:right; margin-right:75px;"> <option>select</option></select></div></br></br>'); 
var temp = $compile(inputElements)($scope); 
$('#projOrder').append(temp); 
$scope.object = object; 
//for(var opt=0; opt<selOptLabels.length; opt++) { 
$('.sel').append('<option ng-repeat="obj in object" value="'+ 
{{obj.value}}+'">'+{{obj.value}}+'</option>'); 

我收到此错误： - 语法错误：无效的属性ID

嗨，我张贴的JSON例子。在我的例子中，这只是json的一小部分。

"ProjectOrder": { 
"Connect direct required": { 
    "value": "N", 
    "id": "STR_15523_62" 
}, 
"Cores": { 
    "value": ".5", 
    "id": "NUM_15523_50" 
}, 
"Permanent data in GB": { 
    "value": "100", 
    "id": "NUM_15523_56" 
}, 
"Description": { 
    "value": "AZBNL azbngb", 
    "id": "STR_15523_2" 
}, 
"Order Id": { 
    "value": "15523", 
    "id": "INT_15523_96" 
}, 
"Project cost center": { 
    "value": "N", 
    "id": "STR_15523_66" 
}, 
"Project debitor": { 
    "value": "N", 
    "id": "STR_15523_64" 
}, 
"Project OE": { 
    "value": "N", 
    "id": "STR_15523_57" 
}, 
"Project SITE": { 
    "value": "N", 
    "id": "STR_15523_59" 
}, 
"Project Status": { 
    "value": "RFC", 
    "id": "STR_15523_54", 
    "dropdown": [ 
    { 
     "value": "IW", 
     "label": "In Work" 
    }, 
    { 
     "value": "RFC", 
     "label": "Ready for Creation" 
    }, 
    { 
     "value": "CR", 
     "label": "Created" 
    }, 
    { 
     "value": "FC", 
     "label": "Failed" 
    } 
    ] 
}, 
"Project Type (paas, miner)": { 
    "value": "paas", 
    "id": "STR_15523_37", 
    "dropdown": [ 
    { 
     "value": "paas", 
     "label": "PaaS Project" 
    }, 
    { 
     "value": "miner", 
     "label": "Miner Project" 
    } 
    ] 
}, 
"WORK data in GB": { 
    "value": "100", 
    "id": "NUM_15523_55" 
} 

}

现在我要创建输入字段和下拉菜单（如果有一个下拉菜单）使用JSON数据

Answer 1

你真的不应该用手构建HTML这样的。如果您使用模板并让模板引擎处理繁重的工作，那么最好。

我还注意到，您使用object作为ng-model。相反，你应该有一个单独的变量，它将保存选定的值。

这里是这样做的更好的方式 - 在一个.html文件：

<div ng-repeat="object in listOfObjects" 
    <label style="float: left">{{ $index }}</label> 
    <select ng-model="selectedValues[$index]" class="form-control sel" 
     style="width:300px; float:right; margin-right:75px;" 
     ng-options="obj.value for obj in object"></select> 
</div> 

然后在任何控制器已在JavaScript中设置：

// this will be the list of selected values 
$scope.selectedValues = new Array(list.length); 
// this would be the array that each `object` is part of 
$scope.listOfObjects = list; 

这还不是最优雅的解决方案，但基本上我所做的是构建一个与对象列表长度相同的数组。当您在ng-repeat中时，角模板有一个特殊变量$index，它跟踪您正在循环的数组的当前索引。

因此，当用户更改第三个选择框（索引2）的选定值时，$scope.selectedValues[2]将设置为选定的选项。

编辑：关于转变JSON到数组：

var list = Object.keys(json).map(function(jsonKey) { 
    return { 
     name: jsonKey, 
     label: json[jsonKey].label, 
     value: json[jsonKey].value 
    }; 
});` 

Answer 2

所以..有许多的原因，这是行不通的。因为您要附加到HTML字符串模板支架所提供的代码甚至不工作...

$('.sel').append('<option ng-repeat="obj in object" value="' +{{obj.value}}+'">'+{{obj.value}}+'</option>'); 

是否有您正在尝试建立自己的标记在js的理由吗？

它也建议不要在角度控制器内使用jQuery。如果你有jQuery加载的jQuery对象可通过angular.element，否则角使用jQuery的光。

而不是列举的其他问题在这里，我放在一起的是如何在角

https://codepen.io/parallaxisjones/pen/BRKebV

一个选择的作品此外，你应该张贴问题到堆栈溢出前咨询角文档这个基本的例子。这些文档提供了一个非常清晰的例子，说明如何在select中使用ng-repeat。https://docs.angularjs.org/api/ng/directive/select

EDIT：我更新了与HTTP GET请求获取JSON数据的一例codepen

EDIT：更新codepen与提供的数据例如，遍历对象，具有（键，值）的在ng-repeat中使用json语法