如何显示默认下拉值显示顶部 angularjs

Question

我在卡片信息下方有一个下拉显示，我想在下面显示is_default= true 卡片显示顶部的其他卡片..请帮助我

<select  ng-model="approvedinvoicesCtrl.currentcard.card_id">
    <option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards ">{{item.brand +'      '+ item.last_digits}}</option>
</select>


{brand:"Visa",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:true},
{
brand:"Master",
card_id:"card_19VHhAGdj8iWoXDURuRqNH28",
last_digits : 123123,
is_default:false}

Answer 1

建议你这样做

 <select>
    <option ng-value="item.card_id" ng-repeat="item in dropdownval "
     ng-selected=item._default >
      {{item.brand +' '+ item.last_digits}}</option>
  </select>

LIVE DEMO

Answer 2

我建议在选项元素上使用ngOptions 而不是ng-repeat。

注意：ngOptions 为“option”元素提供了一种便利，当您希望将选择模型绑定到non-string 值时，应该使用它来代替ngRepeat。这是因为选项元素目前只能绑定到字符串值。有关更多信息，您可以查看此link。

使用 ngOptions 进行演示 ：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.current_job = {
      "cards": [
        {
          brand:"Visa",
          card_id:"card_19A",
          last_digits : 123123,
          is_default:true
        }, {
          brand:"Master",
          card_id:"card_19B",
          last_digits : 123123,
          is_default:false
        }        
      ]
    };
    
   for (var i in $scope.current_job.cards) {
     if ($scope.current_job.cards[i].is_default == true) {
       $scope.topCard = $scope.current_job.cards[i].card_id;
     }
   } 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-options="item.card_id as item.brand+' '+item.last_digits for item in current_job.cards"
   ng-model="topCard"> 
   </select>
</div>

使用 ngRepeat 进行工作演示 ：

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function($scope) {
    $scope.current_job = {
      "cards": [
        {
          brand:"Visa",
          card_id:"card_19A",
          last_digits : 123123,
          is_default:true
        }, {
          brand:"Master",
          card_id:"card_19B",
          last_digits : 123123,
          is_default:false
        }        
      ]
    }; 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
  <select ng-model="currentcard.card_id">
    <option ng-value="item.card_id" ng-repeat="item in current_job.cards" ng-selected="item.is_default">{{item.brand +' '+  item.last_digits}}</option>
  </select>
</div>

Answer 3

您应该使用ng-init 和ng-options 作为默认值，例如：

<select ng-init="somethingHere = options[1]" 
        ng-model="somethingHere" 
        ng-options="option for option in options">
</select>

$scope.options = [
    'Brand1',
    'Brand2',
    'Brand3'        
];

Answer 4

你可以使用orderby

<select ng-model="approvedinvoicesCtrl.currentcard.card_id><option ng-value="item.card_id" ng-repeat="item in approvedinvoicesCtrl.current_job.cards  | orderBy:'is_default':false">{{item.brand +''+ item.last_digits}}</option></select> 

此处项目的“is_default”属性以相反的顺序排序。第二个参数可以是任意排序函数，所以可以按照任意规则排序。

@link http://docs.angularjs.org/api/ng.filter:orderBy

Answer 5

您可能更喜欢预先选择卡片（已选择选项），而不是使用顶部的默认卡片进行排序。

ng-selected如果没有在ng-model中选择值，你可以使用默认值，否则，它会选择ng-model中的值。

<select  ng-model="currentCard.selected" >
  <option 
      ng-value="item.card_id" ng-repeat="item in cards" 
      ng-selected="(currentCard.selected==item.card_id) || (!currentCard.selected && item.is_default)">
      {{item.brand +'      '+ item.last_digits}}
  </option>
</select>

或者您可以使用ng-options 方法。在最后一种情况下，您可以仅使用 ng-model 值预先选择一个选项。

<select 
   ng-model="currentCard.selected" 
   ng-options="item.card_id as item.brand+' '+item.last_digits for item in cards">
</select>

看这两个例子的小提琴：

https://jsfiddle.net/hdca55cg/

如果您之前在模型中选择过，第二个显示默认卡。