在選擇使用NG-值或NG-模型

我有這個數組，這個選擇HTML

$ctrl.languages = 
     [ 
      { 
       key: 'Play Prompt', 
       value: 'blank' 
      }, 
      { 
       key: 'Dont Play Prompt - Assume English', 
       value: 'English' 
      }, 
      { 
       key: 'Dont Play Prompt - Assume Spanish', 
       value: 'Spanish' 
      } 
     ]; 

<select class="form-control" name="vdn" ng-model="$ctrl.ivr.Language" 
                 ng-options="item.value as item.key for item in $ctrl.languages" ng-required="true"> 

               </select>

我使用下拉菜單來顯示的關鍵每個選項的當前下拉菜單，我保存數據庫中所選選項的「值」屬性，但是當我檢索數據時，沒有選擇「值」已保存的選項。

在這種情況下，如果我在數據庫中保存「空白」值，我希望下拉菜單選擇「播放提示」鍵。

感謝

來源

2017-05-25 Gilberto Quintero

您正在設定item.value作爲每當一個選項，從下拉選擇了被設置爲$ctrl.ivr.Language值。由於<select>的ngModel指令指向$ctrl.ivr.Language，因此在控制器中將值設置爲$ctrl.ivr.Language會自動將selected="selectd"添加到具有匹配值的value屬性的下拉列表中。

因此，如果您希望「播放提示」是在數據庫不包含該設置的值時在下拉列表中選擇的值，那麼您可以檢查該值是否存在於API響應中，並且如果不是，則將$ctrl.ivr.Language = 'blank'設置爲默認爲「播放提示」選項。

來源

2017-05-25 16:34:46 IAmKale

我做的數據庫存儲的語言屬性值的請求，如果「空白」被保存在數據庫中，然後將它取回，我想下拉屬性選擇基於值 –

的鍵當你說「空白」時，你是在談論一個空字符串（''''）還是字面值（''blank''）？ – IAmKale

這看起來很簡單。我在這裏提供了一個工作plunker：https://plnkr.co/edit/sCusyXaSJdO0sjgm3csE?p=preview

讓我知道如果你正在尋找別的東西。

在我的代碼中，我添加了一個超時模擬Web服務調用。下面是從plunker控制器代碼：

app.controller('mainController', function($scope, $timeout) { 
    $scope.languages = [ 
     { 
      key: 'Play Prompt', 
      value: 'blank' 
     }, 
     { 
      key: 'Dont Play Prompt - Assume English', 
      value: 'English' 
     }, 
     { 
      key: 'Dont Play Prompt - Assume Spanish', 
      value: 'Spanish' 
     } 
    ]; 

    $scope.ivr = {}; 

    // Simulating Web service Call 
    $scope.retrievingData = true; 
    $timeout(function() { 
     $scope.ivr.Language = 'blank'; 
     $scope.retrievingData = false; 
    }, 2000); 
});

來源

2017-05-25 17:06:00 CodeWarrior

在選擇使用NG-值或NG-模型

回答

相關問題