Question

我是AngularJS的新手，所以它可能非常简单，但我似乎无法弄明白。问题不在于AngularJS代码本身，但我确定它在某种程度上是连接的，因为我已经在一个空白的纯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>
...

再一次，其他一切都按预期工作。唯一的问题是在页面加载时实际上没有选择所谓的选择选项。

有什么想法吗？

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进行此操作。

文档中的示例：

＆＃13;

<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>

＆＃13;

Answer 3

在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>

Answer 4

在角度中你应该使用ngSelected指令而不是选择，如下所示：

<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 5

所以我通过添加 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 bacause在我的情况下它是一个1-d值的数组，并且在这种情况下使用ng-options不是必需的，也不是最优雅的（因为它）在我看来，解决方案。

谢谢你们找到ng-selected的链接，发现它们非常有用。

Answer 6

使用

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

作为默认

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

6 个答案: