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”元素提供了一个工具，当您希望将select模型绑定到{{{}时，应该使用该工具代替ngRepeat 1}}价值。这是因为选项元素目前只能绑定到字符串值。有关详细信息，请查看此link。

使用 non-string 进行演示

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
        }        
      ]
    }; 
})

Answer 3

您可以使用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 4

您应该使用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 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/

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

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

5 个答案: