AngularJS - 使用JSON從REST API填充HTML下拉菜單（不包括$ scope）

堆棧溢出與填充下拉菜單相關的很多解決方案包括$scope。

我的第二個下拉菜單取決於我的第一個下拉菜單的值，因此我在第一個HTML select上使用ng-change將參數傳遞給第二個下拉菜單的函數。

1下拉HTML和角度JS：

<select data-ng-controller="addAssetController as addAssetCtrl" id="functionalOrg" data-ng-model="addAssetFormCtrl.functionalOrg.id" ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)"> 

    <option data-ng-repeat="functionalOrg in addAssetCtrl.functionalOrgs | orderBy:'id' track by $index" value="{{functionalOrg.id}}"> 
     {{functionalOrg.id}} - {{functionalOrg.account}} 
    </option> 

</select>

因此ng-change：

ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)"

var vm = this; 

functionalOrganisationRepository.getFunctionalOrganisation().then(function (results) { 
    vm.functionalOrgs = results; 
}, function (error) { 
    vm.error = true; 
    vm.errorMessage = error; 
});

的第二個下拉HTML和角度：

<select data-ng-controller="addAssetController as addAssetCtrl" id="location" data-ng-model="addAssetFormCtrl.location.id"> 

    <option data-ng-repeat="location in addAssetCtrl.locations | orderBy:'id' track by $index" value="{{location.id}}"> 
     {{location.id}} - {{location.address6}} 
    </option> 

</select>

vm.getLocations = function(id) { 

    console.log("Functional org ID:" + id); 

     locationRepository.getLocation(id).then(function (results) { 
      vm.locations = results; 
     }, function (error) { 
      vm.error = true; 
      vm.errorMessage = error; 
     }); 
}

假設我的業務層是罰款並帶回與我需要的一切JSON對象，什麼可能的問題是什麼？由於我的控制檯日誌正在打印，因此vm.getLocations函數肯定會被調用。服務層也很好，因爲要記錄到我的命令提示符的JSON對象。

我的問題是我如何填充我的第二下拉從任何JSON返回getLocations？因此，我不想在Angular中使用$scope。

來源

2016-02-09 Jordan

請創建一個plunker並提供 –

方法locationRepository.getLocation（id）檢索列表？ –

每次選擇時都會重複「ng-controller」屬性。只將屬性放在父元素上一次！ – manzapanza

的「NG控制器」屬性上的每個選擇。只將屬性放在父元素上一次！

<div data-ng-controller="addAssetController as addAssetCtrl"> 

<!-- Drop Down 1 and 2 here --> 

</div>

來源

2016-02-09 14:12:28 manzapanza

謝謝，manzapanza – Jordan

如果你不分享範圍，你不能做你想做的事情。意思是如果你沒有父母虛擬主機或傳遞一些東西給你的指令=你不能說出選擇什麼。

拉起你的控制器一個級別，並在選定之間共享它，或者你將不得不觀看服務中的共享變量，或依靠$on & $broadcast進行通信。

來源

2016-02-09 14:08:15 Nix

很確定這是因爲他們有不同的範圍和不同的控制器。

假設實際的HTML如下所示：

<select data-ng-controller="addAssetController as addAssetCtrl" id="location" data-ng-model="addAssetFormCtrl.location.id"> 

    <option data-ng-repeat="location in addAssetCtrl.locations | orderBy:'id' track by $index" value="{{location.id}}"> 
     {{location.id}} - {{location.address6}} 
    </option> 

</select> 

<select data-ng-controller="addAssetController as addAssetCtrl" id="functionalOrg" data-ng-model="addAssetFormCtrl.functionalOrg.id" ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)"> 

    <option data-ng-repeat="functionalOrg in addAssetCtrl.functionalOrgs | orderBy:'id' track by $index" value="{{functionalOrg.id}}"> 
     {{functionalOrg.id}} - {{functionalOrg.account}} 
    </option> 

</select>

然後，就我所知，每個選擇都會得到控制器的不同實例，每個都有不同的範圍。所以你已經有效地得到了一個控制器addAssetCtrl1和addAssetCtrl2，所以在1上設置數據不會將它設置在2上。

的解決方案將是更簡單地設定的數據的父控制器上，或者，可能的是，執行以下操作：重複

<div data-ng-controller="addAssetController as addAssetCtrl"> 
    <select id="location" data-ng-model="addAssetFormCtrl.location.id"> 

     <option data-ng-repeat="location in addAssetCtrl.locations | orderBy:'id' track by $index" value="{{location.id}}"> 
      {{location.id}} - {{location.address6}} 
     </option> 

    </select> 

    <select id="functionalOrg" data-ng-model="addAssetFormCtrl.functionalOrg.id" ng-change="addAssetCtrl.getLocations(addAssetFormCtrl.functionalOrg.id)"> 

     <option data-ng-repeat="functionalOrg in addAssetCtrl.functionalOrgs | orderBy:'id' track by $index" value="{{functionalOrg.id}}"> 
      {{functionalOrg.id}} - {{functionalOrg.account}} 
     </option> 

    </select> 
</div>

來源

2016-02-09 14:10:59 ipsi

AngularJS - 使用JSON從REST API填充HTML下拉菜單（不包括$ scope）

回答

相關問題