在AngularJS中用ng選項設置填充選擇菜單的'selected'選項

我想通過AngularJS ng-option指令填充選擇菜單，並選擇預定義選項作爲默認選項。在AngularJS中用ng選項設置填充選擇菜單的'selected'選項

這是AngularJS獲取JSON的樣子：

{"AF":"Afghanistan","AX":"\u00c5land Islands","AL":"Albania","DZ":"Algeria","AS":"American Samoa","AD"}

填充選擇菜單中的代碼工作：

angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) { 
    $scope.selectedCountries = null; 
    $scope.countries = []; 

    $http({ 
       method: 'GET', 
       url: '/api/getCountries' 
    }).success(function (result) { 
       $scope.countries = result; 
    }); 
});

選擇菜單中的HTML：

<select name="property_country" ng-model="drpdpwnvalue" ng-options="key as value for (key , value) in countries track by key"> 
    <option value="">Please choose</option> 
</select>

現在，我們假設我想用鍵「AL」作爲選定的默認選項來定義國家。這怎麼能實現？

來源

2017-03-04 Chris

嘗試ng-selected上的選項元素。

<select ng-model="drpdpwnvalue" ng-model="selectedCountries"> 
    <option value="{{key}}" ng-repeat="key as value for (key , value) in countries track by key" ng-selected="key === 'AL'">{{value}}</option> 
</select>

來源

2017-03-04 13:46:02 stackoverYC

謝謝，但有沒有解決方案與ng選項？此外，我寧願防止使用花括號，因爲我的模板引擎也使用它們。 – Chris

只需設置$scope.drpdpwnvalue爲「AL」的控制器：

angular.module('drpdwnApp', []).controller('drpdwnCtrl', function ($scope, $http) { 
    $scope.selectedCountries = null; 
    $scope.countries = []; 
    $scope.drpdpwnvalue = 'AL'; // this line is added 
    $http({ 
       method: 'GET', 
       url: '/api/getCountries' 
    }).success(function (result) { 
       $scope.countries = result; 
    }); 
});

ng-options作品與NG-模型同步，所以只要操作ng-model值，另一部分是由角

照顧

UPDATE 我做了一些調試，發現track by key是問題所在。所以刪除它。我也創建了working plunker，看看。

$(document).ready(function() { 
     $.getJSON("/api/getCountries", function(result) { 
      var options = $("select[name=property_country]"); 

      $.each(result, function(key, value) { 
       options.append($("<option />").val(key).text(value)); 
      }); 

      $('select[name=property_country] option[value="AL"]').attr("selected", "selected"); 
     }); 
    });

然而這只是參考，因爲它是由JQuery的實現將不會接受的答案：

來源

2017-03-04 16:37:02

不幸的是，這對我不起作用。 – Chris

下拉菜單本身是否正確顯示國家？ –

我剛剛注意到你正在使用兩個ng-model聲明'ng-model =「drpdpwnvalue」ng-model =「selectedCountries」'，你需要刪除最後一個 –

我終於通過簡單的使用JQuery作爲兩個角的解決方案，我正常沒有工作實現它。

來源

2017-03-05 10:15:29 Chris

在AngularJS中用ng選項設置填充選擇菜單的'selected'選項

回答

相關問題