选择的选项不适用于 AngularJS 模板

Question

我是 AngularJS 的新手，所以它可能非常简单，但我似乎无法理解。问题不在 AngularJS 代码本身，但我确定它以某种方式连接，因为我已经在空白 pure-HTML 测试页中尝试过它，并且它有效，它应该如何工作。

headers.html:

<table>
<thead>
    <tr>
        <td colspan="2" align="right">
            Sort headers by:
            <select ng-model="sortHeaders">
                <option value="rating">Rating</option>
                <option value="id" selected>ID</option>
            </select>
        </td>
    </tr>
    <tr>
        <th>Rating</th>
        <th>Header</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="header in headers | filter:search | orderBy:sortHeaders">
        <td>{{header.rating}}</td>
        <td>{{header.title}}</td>
    </tr>
</tbody>

这里的问题是，正如标题所说，<option value="id" selected> 在页面加载时没有被选中，这是应该的。 headers.html 显然是数据输出的模板。除了这个 selected 问题外，它完美地完成了工作。

加载自headers_app.js:

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

headersApp.directive('headers', [function () {
return {
    restrict: 'E',
    controller: function($scope, $http) {
        $http.get('/api/headers.json').success(function(data) {
            $scope.headers = data.headers;
        });
    },
    templateUrl: '/templates/headers.html',
    replace: true,
    link: function (scope, element, attrs) {
        console.log('linked headersApp');
    }
};
}]);

当然里面还有这个人index.html:

...
<headers>
</headers>
...

再一次，其他一切都按预期工作。唯一的问题是 supposed-to-be-selected 选项在页面加载时实际上并未被选中。

有什么想法吗？

Answer 1

 link: function (scope, element, attrs) {
       scope.sortHeaders  = "id";
    }

正如其他回复所说，你也可以这样做：

<select ng-model="sortHeaders">
    <option value="rating">Rating</option>
    <option value="id" ng-selected="true">ID</option>
</select>

Answer 2

查看 angularjs 文档。您可以为此使用 ngSelected。

文档中的示例：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<label>Check me to select: <input type="checkbox" ng-model="selected"></label>
<br/>
<select aria-label="ngSelected demo">
  <option>Hello!</option>
  <option id="greet" ng-selected="selected">Greetings!</option>
</select>

Answer 3

在 angular 中，您应该使用 ngSelected 指令而不是 selected，如下所示：

<select ng-model="sortHeaders">
    <option value="rating">Rating</option>
    <option value="id" ng-selected="selected">ID</option>
</select>

https://docs.angularjs.org/api/ng/directive/ngSelected

Answer 4

所以我通过添加 headers.app

来解决它

$scope.sortBy = ['id','rating'];

并将我的 <select> 块替换为

<select ng-model="sortHeaders">
<option ng-repeat="option in sortBy"
    value="{{option}}"
    ng-selected="{{option=='id'}}">{{option | uppercase}}</option>
</select>

我没有使用 ng-options 因为在我的例子中它是一维值数组，在这种情况下使用 ng-options 不是必需的，也不是最优雅的（在我看来），解决方案。

感谢你们提供 ng-selected 的链接，发现它们非常有用。

Answer 5

使用

<option  ng-selected="true">Select Event Name</option>

作为默认值

Answer 6

在ng-selected

中使用表达式

<OPTION ng-selected="expression">
  ...
</OPTION>

<select ng-model="selectedid">
<option value="" disabled selected>Seleccione...</option>
   <option ng-repeat="item in list" 
   ng-selected="{{item.Value}} === {{selectedid}}" 
   value="{{item.Value}}">{{item.Text}}  
</option>
</select>

选择的选项不适用于 AngularJS 模板

option selected not working from AngularJS template

html

javascript

selected

angularjs