Angular 1.5：無法初始化正確的選擇項目

我正在嘗試使用角度js構建選擇項目組件。但它沒有選擇正確的默認選定值。Angular 1.5：無法初始化正確的選擇項目

我初始化選擇項的值作爲{"brandSetCode":1,"bannerColor":null,"fontColor":null};

但它總是選擇最後一個元素。如何解決這個問題？

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example</title> 
 
    
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="sanitizeExample"> 
 
     <script> 
 
     angular.module('sanitizeExample', ['ngSanitize']) 
 
      .controller('ExampleController', ['$scope', function($scope, $sce) { 
 
      $scope.initSelectItem ={"brandSetCode":null,"bannerColor":null,"fontColor":null}; 
 
       
 
      $scope.mySelectableItems =[{ 
 
\t "label": "All", 
 
\t "value": { 
 
\t \t "brandSetCode": null, 
 
\t \t "bannerColor": null, 
 
\t \t "fontColor": null 
 
\t } 
 
}, { 
 
\t "label": "SPIRITS", 
 
\t "value": { 
 
\t \t "brandSetCode": 1, 
 
\t \t "bannerColor": null, 
 
\t \t "fontColor": null 
 
\t } 
 
}, 
 
{ 
 
"label": "WINES", 
 
"value": { 
 
\t "brandSetCode": 3, 
 
\t "bannerColor": null, 
 
\t "fontColor": null 
 
} 
 
} 
 
]; 
 
       
 
      }]); 
 
      
 
      
 
    </script> 
 
    <div ng-controller="ExampleController"> 
 
     <select name="brand" 
 
\t \t \t \t \t data-ng-model="initSelectItem" 
 
\t \t \t \t \t \t data-ng-options="brand.value as brand.label for brand in mySelectableItems track by $index"> 
 
\t \t \t \t </select> 
 
     </div> 
 
</body> 
 
</html>

來源

2016-12-13 Unknown

使用ng-init()和初始化的默認選項。

<select ng-init="initSelectItemDefault()" ng-model="initSelectItem" ng-options="brand.label for brand in mySelectableItems"> 
    </select>

並在控制器

$scope.initSelectItemDefault = function(){ 
    $scope.initSelectItem = $scope.mySelectableItems.filter(e => e.label == "All")[0]; 
    }

DEMO

來源

2016-12-13 10:27:51

您需要刪除track by或手動比較他們，因爲賽道由模型中添加一個名爲$$哈希場。

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Example</title> 
 
    
 

 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script> 
 
    
 

 
    
 
</head> 
 
<body ng-app="sanitizeExample"> 
 
     <script> 
 
     angular.module('sanitizeExample', ['ngSanitize']) 
 
      .controller('ExampleController', ['$scope', function($scope, $sce) { 
 
      $scope.initSelectItem = {}; 
 
       
 
      $scope.mySelectableItems =[{ 
 
\t "label": "All", 
 
\t "value": { 
 
\t \t "brandSetCode": -1, 
 
\t \t "bannerColor": -1, 
 
\t \t "fontColor": -1 
 
\t } 
 
}, { 
 
\t "label": "SPIRITS", 
 
\t "value": { 
 
\t \t "brandSetCode": 1, 
 
\t \t "bannerColor": null, 
 
\t \t "fontColor": null 
 
\t } 
 
} 
 
]; 
 
       
 
      }]); 
 
      
 
      
 
    </script> 
 
    <div ng-controller="ExampleController"> 
 
     <select name="brand" ng-init="initSelectItem = mySelectableItems[0].value" 
 
\t \t \t \t \t data-ng-model="initSelectItem" 
 
\t \t \t \t \t \t data-ng-options="brand.value as brand.label for brand in mySelectableItems"> 
 
       
 
\t \t \t \t </select> 
 
     </div> 
 
</body> 
 
</html>

來源

2016-12-13 10:28:33 Yaser

Angular 1.5：無法初始化正確的選擇項目

回答

相關問題