如何在下拉菜单中获取ID并在顶部设置默认值

Question

我有下面的代码，我想要card_id，但显示为null 。 如何获得ID和is_default卡在顶部？ 当我使用ng-click时，它显示以下结果。 我想获取所选的card_id。

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

结果：

card_id: "",
charge_description: "ff", 
charge_type: "Credit Card Payment"

Answer 1

您需要使用ng-init和ng-options指令：

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

使用ng-init设置所需的默认值

Answer 2

使用ngOptions （该页面上有更多示例）来设置选择列表的选项，并使用ng-bind在DOM中显示card_id 。 它还使用功能性方法通过Array.prototype.find（）设置当前卡。 请参阅以下示例：

 angular.module('app', []) .controller('ctrl', function($scope) { $scope.approvedinvoicesCtrl = { current_job: { cards: [{ card_id: 1, brand: "BMW", last_digits: "Z3", is_default: false }, { card_id: 2, brand: "Mercedes", last_digits: "713", is_default: true }, { card_id: 3, brand: "Audi", last_digits: "Q4", is_default: false }] } }; //set the model/default selected item $scope.approvedinvoicesCtrl.currentcard = $scope.approvedinvoicesCtrl.current_job.cards.find(CardIsDefault); $scope.log = function() { console.log('card_id: ', $scope.approvedinvoicesCtrl.currentcard.card_id); }; }); function CardIsDefault(card) { return card.is_default; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div>Selected brand: <span ng-bind="approvedinvoicesCtrl.currentcard.brand"></span> </div> <div>Selected Id: <span ng-bind="approvedinvoicesCtrl.currentcard.card_id"></span> </div> <select ng-options="item.brand+' '+item.last_digits for item in approvedinvoicesCtrl.current_job.cards" ng-model="approvedinvoicesCtrl.currentcard"></select> <button ng-click="log();">show card_id</button> </div>