ng-init 没有在我的 Angular 应用中的 select 中设置我的默认类别

Question

我遇到了与这里提到的完全相同的问题：How to have a default option in Angular.js select box

但是 none 的答案解决了我下面的问题，我试图让第一个类别显示在 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" select 标签然后在控制器中初始化 vm.addedTag = vm.categories[0];。并且还在 select 标签中使用 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>

ng-init 没有在我的 Angular 应用中的 select 中设置我的默认类别

ng-init is not setting my default category in my select within my Angular app

javascript

angularjs

drop-down-menu

angularjs-ng-init