ng-init未在Angular應用中的選擇中設置默認類別

Question

我有和這里提到的完全相同的問題： 如何在Angular.js選擇框中使用默認選項

但是，沒有一個答案能解決我的問題，我正在嘗試讓第一個類別顯示在select里面：

<p>Choose a tag category:</p>
<div class="select-style">
    <select ng-model="modal.addedTag" ng-init="modal.addedTag = modal.categories[0].name" ng-options="category.name for category in modal.categories">
        <!-- <option value="brand" selected>Brand</option> 
        <option value="client">Client</option>
        <option value="company-name">Company Name</option>
        <option value="government">Government</option>
        <option value="events">Events</option>
        <option value="industry">Industry</option>
        <option value="products">Products</option>
        <option value="news">News</option> -->
    </select>
</div>

---

我的控制器中的模型：

var vm = this;
vm.categories = [
    { name: 'brand' },
    { name: 'client' },
    { name: 'competitor-name' },
    { name: 'company-name' },
    { name: 'government' },
    { name: 'events' },
    { name: 'industry' },
    { name: 'people' },
    { name: 'philanthropic' },
    { name: 'products' },
    { name: 'product-category' },
    { name: 'product-feature' },
    { name: 'place' },
    { name: 'problem' },
    { name: 'news' },
    { name: 'related-company-name' },
    { name: 'trend' }
];

Answer 1

可以嘗試從controller而不是在DOM初始化vm.addedTag

vm.addedTag = vm.categories[0].name; // after your categories array 

在html中僅使用ng-model而無需使用ng-init並將category.name as category.name

<select ng-model="modal.addedTag" ng-options="category.name as category.name for category in modal.categories"></select>

Answer 2

嘗試在控制器中。

如果您ng-options="category.name for category in modal.categories"使用ng-options="category.name for category in modal.categories"選擇標簽，然后初始化vm.addedTag = vm.categories[0]; 在控制器中。 並在選擇標簽中使用ng-options="category.name as category.name for category in modal.categories" ，然后使用以下方法初始化vm.addedTag模型vm.addedTag = vm.categories[0].name;

 var myapp = angular.module('app', []); myapp.controller('Main', function ($scope) { var vm = this; vm.categories = [ { name: 'brand' }, { name: 'client' }, { name: 'competitor-name' }, { name: 'company-name' }, { name: 'government' }, { name: 'events' }, { name: 'industry' }, { name: 'people' }, { name: 'philanthropic' }, { name: 'products' }, { name: 'product-category' }, { name: 'product-feature' }, { name: 'place' }, { name: 'problem' }, { name: 'news' }, { name: 'related-company-name' }, { name: 'trend' } ]; vm.addedTag = vm.categories[0]; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app = "app"> <div ng-controller="Main as modal"> <div class="select-style"> <select ng-model="modal.addedTag" ng-options="category.name for category in modal.categories"> </select> </div> </div> </div>