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;

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

因此，当用户更改第3个选择框（索引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获得，否则angular使用jQuery light。

我没有列举其他问题，而是把这个基本的例子放在一个选择如何在Angular中工作

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

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

编辑：我使用HTTP GET请求获取JSON数据的示例更新了我的codepen

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

AngularJs将选项附加到选择框

2 个答案: