javascript 从 AngularJS 模板中选择的选项不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31408249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
option selected not working from AngularJS template
提问by Ivan Chepurin
I'm new to AngularJS, so it could be really simple, but I just can't seem to figure it out. The problem is not in the AngularJS code itself, but I'm sure it is somehow connected, because I've tried it in a blank pure-HTML test page, and it worked, how it's supposed to.
我是 AngularJS 的新手，所以它可能非常简单，但我似乎无法弄清楚。问题不在于 AngularJS 代码本身，但我确定它以某种方式连接，因为我已经在空白的纯 HTML 测试页面中尝试过它，并且它可以正常工作，应该如何。
headers.html:
头文件.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>
The problem here is, as the title says, with <option value="id" selected>not being selected at page load, how it's supposed to be.
headers.htmlis, obviously, a template for data output. And it does the job perfectly, except for this selectedproblem.
这里的问题是，正如标题所说，<option value="id" selected>在页面加载时没有被选中，它应该如何。
headers.html显然是数据输出的模板。它完美地完成了这项工作，除了这个selected问题。
It's loaded from headers_app.js:
它是从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');
}
};
}]);
and, of course, there is this guy inside index.html:
而且，当然，在index.html 中有这个人：
...
<headers>
</headers>
...
Once again, everything else works as expected. The only problem is that supposed-to-be-selected option is not actually selected at page load.
再一次，其他一切都按预期工作。唯一的问题是在页面加载时实际上并未选择应该选择的选项。
Any ideas?
有任何想法吗？
回答by gr3g
link: function (scope, element, attrs) {
scope.sortHeaders = "id";
}
As said in other responses, you can do it this way also:
正如其他回复中所说，您也可以这样做：
<select ng-model="sortHeaders">
<option value="rating">Rating</option>
<option value="id" ng-selected="true">ID</option>
</select>
回答by user3738570
Use expression in ng-selected
在 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>
回答by Paulo Gabriel
Take a look at angularjs docs. You can use the ngSelectedfor this.
看看 angularjs 文档。您可以为此使用ngSelected。
Example in docs:
文档中的示例：
<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>回答by user1260272
In angular you should use the ngSelected directive instead of selected, like so:
在 angular 中，您应该使用 ngSelected 指令而不是 selected ，如下所示：
<select ng-model="sortHeaders">
<option value="rating">Rating</option>
<option value="id" ng-selected="selected">ID</option>
</select>
回答by Ivan Chepurin
So I solved it by adding to headers.app
所以我通过添加到headers.app来解决它
$scope.sortBy = ['id','rating'];
and replacing my <select>block with
和更换我的<select>阻滞
<select ng-model="sortHeaders">
<option ng-repeat="option in sortBy"
value="{{option}}"
ng-selected="{{option=='id'}}">{{option | uppercase}}</option>
</select>
I didn't use ng-optionsbacause in my case it's a 1-d array of values and using of ng-optionsis not, in this case, the needed, nor the most elegant (as it seems to me), solution.
我没有使用ng-optionsbacause 在我的情况下它是一个一维值数组ng-options，在这种情况下使用 of不是需要的，也不是最优雅的（在我看来）解决方案。
And thank you guys for the links to ng-selected, found them really useful.
感谢你们提供的链接ng-selected，发现它们真的很有用。
回答by Gajender Singh
use
利用
<option ng-selected="true">Select Event Name</option>
as your default
作为你的默认
