如何使用Angularjs从下拉列表中预填充第一个标志

时间:2017-09-15 04:02:55

标签: javascript html angularjs

我在下拉列表中有2个标记,我希望下拉列表中的第一个标记被预先填充。请帮忙。必须预先填写具有英文名称的标记,如果我更改标记,则刷新后必须保留最近更新的标记。

我在这里分享代码:

HTML:

<li id="globeList">
   <md-select ng-model="selectedLanguage" aria-label="selectedLanguage2" ng-change="changeLanguage(selectedLanguage)">
       <md-option ng-value="{{item}}" ng-repeat="(index,item) in lans" ng-selected="item.name == langStatus">
           <img src="{{item.image}}" alt="{{item.name}}" title="{{item.name}}">
       </md-option>
   </md-select>
</li>

控制器:

$scope.langStatus = sessionStorage.getItem("languageName");
      if ($scope.langStatus) {
        userApi.getLangName($scope.langStatus)
               .then(function(success) {
                  $rootScope.languageName = success.data[0];
               }, function(error) {
                  console.log(error);
               })
      } else {
        var lang_name = 'English';
        userApi.getLangName(lang_name)
               .then(function(success) {
                  $rootScope.languageName = success.data[0];
                  sessionStorage.setItem("languageName", lang_name);
               }, function(error) {
                  console.log(error);
               })
      }
$scope.toggleImg = function(art_id, id) {
      var bigImage = angular.element("#" + art_id).attr('src');
      var smallImage = angular.element("#" + id).attr('src');
      angular.element("#" + art_id).attr('src', smallImage);
      angular.element("#" + id).attr('src', bigImage);
    }
    $scope.changeLanguage = function(selectedLanguage) {
      userApi.getLangName(selectedLanguage.name)
             .then(function(success) {
                $rootScope.languageName = success.data[0];
                sessionStorage.setItem("languageName", selectedLanguage.name);
             }, function(error) {
                console.log(error);
             })
    }

2 个答案:

答案 0 :(得分:0)

尝试使用以下

 <md-select ng-model="selectedLanguage" ng-init="selectedLanguage =  lans[0]" aria-label="selectedLanguage2" ng-
 change="changeLanguage(selectedLanguage)">
   <md-option ng-value="{{item}}" ng-repeat="(index,item) in lans" ng-
  selected="item.name == langStatus">
       <img src="{{item.image}}" alt="{{item.name}}" title="{{item.name}}">
   </md-option>
 </md-select>

尝试初始化ng-init中的第一个选项然后它应该适用于您的情况

答案 1 :(得分:0)

我认为你没有加载默认语言

setDefaultEnglish(); 
function setDefaultEnglish() { 
var test = sessionStorage.getItem("languageName"); 
if(!test){
var lang_name = 'English'; 
sessionStorage.setItem("languageName", lang_name); 
}
};