如使用$ rootScope变量选定的角度NG-重复的选择,设置一个选项 [英] Angular ng-repeat for a select, setting one option as selected using $rootScope variable
本文介绍了如使用$ rootScope变量选定的角度NG-重复的选择,设置一个选项的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下选择:
<选择类=表格控
的onchange =User_Changed_Language()
ID =HeaderLanguageSelection
风格=光标:指针;宽度:100%;高度:30PX;保证金:0;填充:0
标题={{Labels.Change_Language_Tooltip}}>
<选项NG重复=One_Language在Languages_List
值={{One_Language。code}}
NG-选择=One_Language code == CURRENT_LANGUAGE。>
{{One_Language.Name}}
< /选项>
< /选择>
现在, CURRENT_LANGUAGE
是一个值(例如EN)在 $ rootScope
变量。我要选择元素的第一个显示所选择的值代替。我在做什么错了?
还要说明一点:我知道,我可以用 NG-点击
,但我不认为这是问题的根源。
感谢。
解决方案
勾选此片段:
\r
\r\r
\r VAR应用= angular.module('应用',[]);\r
\r
app.controller('MainCtrl',函数($范围,$ rootScope){\r
\r
$ scope.Labels = {Change_Language_Tooltip:改变郎};\r
$ scope.Languages_List = [\r
{名称:'英语',code:'恩'},\r
{名称:'猎犬',code:'上课'},\r
{名称:'意大利',code:'它'}];\r
$ rootScope.current_Language = $ scope.Languages_List [1];\r
\r
});
\r
<!DOCTYPE HTML>\r
< HTML NG-应用=应用程序>\r
\r
< HEAD>\r
<间的charset =UTF-8/>\r
<脚本SRC =HTTPS://$c$c.angularjs.org/1.3.15/angular.js>< / SCRIPT>\r
&所述; SCRIPT SRC =app.js>&下; /脚本>\r
< /头>\r
\r
<机身NG控制器=MainCtrl>\r
< P>选择产品:{{CURRENT_LANGUAGE}}< / P>\r
\r
<选择类=表格控\r
的onchange =User_Changed_Language()\r
ID =HeaderLanguageSelection\r
风格=光标:指针;宽度:100%;高度:30PX;保证金:0;填充:0\r
标题={{Labels.Change_Language_Tooltip}}\r
NG-选项=item.name为项Languages_List轨道按项目。code\r
NG-模式=CURRENT_LANGUAGE>\r
< /选择>\r
\r
< /身体GT;\r
\r
< / HTML>
\r
PS:所选择的项目(默认或初始)必须在ngOptions列表中使用的项中的一个元素
I have the following select:
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}">
<option ng-repeat="One_Language in Languages_List"
value="{{One_Language.Code}}"
ng-selected="One_Language.Code == current_Language">
{{One_Language.Name}}
</option>
</select>
Now, current_Language
is a $rootScope
variable with a value (e.g. "EN"). I want the select element to display the selected value instead of the very first. What am I doing wrong?
One more note: I know that I could use ng-click
, but I don't think this is the source of the issue.
Thanks.
解决方案
Check this snippet:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.Labels = {Change_Language_Tooltip: "change lang"};
$scope.Languages_List = [
{ name: 'English', Code: 'en' },
{ name: 'Espanol', Code: 'es' },
{ name: 'Italian', Code: 'it' }];
$rootScope.current_Language = $scope.Languages_List[1];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>selected item is : {{current_Language}}</p>
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}"
ng-options="item.name for item in Languages_List track by item.Code"
ng-model="current_Language">
</select>
</body>
</html>
PS: the selected item (default or initial) must be one element of the items used in the ngOptions list
这篇关于如使用$ rootScope变量选定的角度NG-重复的选择,设置一个选项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文