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>');

我收到此错误：-SyntaxError：无效的属性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 ，Angular模板有一个特殊的变量$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，则可以通过angular.element使用jQuery对象，否则，angular使用jQuery light。

我没有在这里列举其他问题，而是整理了一个有关如何在Angular中进行选择的基本示例。

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

另外，在发布问题以使堆栈溢出之前，您应该查阅角度文档。 该文档提供了一个非常清晰的示例，说明如何在select中使用ng-repeat。 https://docs.angularjs.org/api/ng/directive/select

编辑 ：我更新了我的代码笔与示例与HTTP GET请求获取JSON数据

编辑 ：使用提供的数据示例更新了代码笔，在ng-repeat中使用json语法中的（key，value）遍历对象