將API從JSON綁定到多選

因此，當用戶從API註冊到Web應用程序時，我提出了一些問題。我正在嘗試使用Angular.js通過將如下所示的由鍵和值分隔的問題拉到html選項中來實現此目的。該API返回類似於：將API從JSON綁定到多選

[ 
{ 
    "key": "1", 
    "value": "What was the make and model of your first car?" 
}, 
{ 
    "key": "2", 
    "value": "In what city or town was your first job?" 
}, 
{ 
    "key": "3", 
    "value": "What is the name of your favorite childhood friend?" 
} 
]

有30這些返回，我需要注入這些下拉菜單。

一直在尋找和嘗試，只是沒有得到這與修改我的控制器指向正確的方向，並修改我的指令，以允許這一點。

不知道我哪裏錯了，但希望你們中的一些人可以幫助或指向我的教程顯示這個非常確切的事情。

非常感謝。

來源

2015-05-28 Mark

需要補充的是，如果用戶在最上面的下拉列表中選擇了一個問題，那麼該選項在其餘下拉列表中將不可用。 – Mark

您檢出了：https://docs.angularjs.org/api/ng/directive/ngOptions？

所以在你的標記，你會怎麼做：<select ng-options="jsonValue.value as jsonValue in JsonValues" ng-model="selectedValue">

而在你的控制器：

$scope.jsonValues = // JSON result you posted above. Use route.resolve or whatever method to set this.

當您更改下拉值，$scope.selectedValue將與對象{ key : x, value : 'value' }更新，對應選定的值。

來源

2015-05-28 23:28:10 RoryGilchrist

感謝您的快速回復。所以對於API返回的JSON，我只看到那些在Postman或Fiddler中運行「http：// localhost：8011/api/reg/questions」的人。不會認爲我必須將這些回吐到我的控制器邏輯中，而只是指出並重復某種形式。希望這是有道理的，因爲這個想法是可以在後端改變問題並且在應用中反映出來。 – Mark

另外，我將如何處理在一個下拉列表中選擇的一個問題未在前面的2個下拉列表中顯示的問題？您知道如何註冊時，您通常會選擇3個問題，然後在請求密碼重置時輸入答案。 – Mark

如果您的JSON來自端點，您需要從Angular控制器中調用該端點，然後正確設置$ scope對象。例如'$ http.get（'localhost：8011/api/reg/questions'）。success（function（data）{$ scope.questions = data.questions}）'ngOptions **是**重複代碼，當你將其設置在它生成的'

將API從JSON綁定到多選

回答