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語法