正在尝试根据用户操作系统自动选择选项框

Question

所以我在这里有一个实时网站：http://www.trock.net/#/downloads

我想做的是根据用户操作系统预先选择"选择操作系统"选项。

apps.js位于此处：http://www.trock.net/js/app.js.

下载页面的原始HTML位于此处：www.trock.net/includes/downloads.HTML

现在，问题是我的detectOS功能似乎不起作用。我已经尝试将它附加到应用程序上的ng-init和选择框后的div上的ng-init，但这不起作用。如果我附加ng-click并单击它，它将按预期工作。

每个选项都有一个ID，这是我用来查找元素的ID，这样我就可以将"selected"设置为true。有没有更好的方法来使用angular？

我该如何实现这一点，我调用函数的问题是太早还是太迟？

apps.js中感兴趣的代码：

//Auto select Operating System based on detection
$scope.detectOS = function() {
var processorArchitecture = "";
var userOS = "";
if (navigator.userAgent.indexOf("WOW64") != -1 || 
navigator.userAgent.indexOf("Win64") != -1 ){
processorArchitecture = "64";
} else { //Assume 32 bit
processorArchitecture = "32";
}
//Detect the OS
if (navigator.platform.indexOf("Win") != -1){
userOS = "win";
if (processorArchitecture == "64")
processorArchitecture = "32";
} 
else if (navigator.platform.indexOf("Mac") != -1){
userOS = "mac";
if (processorArchitecture == "64")
processorArchitecture = "32";
} 
else if (navigator.platform.indexOf("Lin") != -1){
userOS = "lin";
}
//Check for valid detection
if (userOS != "" && processorArchitecture != "") {
//Valid match found
var optionSelectionID = userOS + processorArchitecture;
//Auto detect OS
//We will find only 1 instance of said query
angular.element( document.querySelector( "#win32") )[0].selected = true;
}
};

我还做了一个plunker，它确实有效，所以它一定是我在网站上做的其他事情(也许是以其他.html页面ajax风格加载)。

链接：http://plnkr.co/edit/zlmk24aVHeBNz79PjypP?p=preview

Answer 1

好的，所以我解决了这个问题，似乎ng-model的存在阻止了上述代码的工作。删除它意味着它运行良好，但我需要ng-model集来做其他事情。

无论如何，我最终使用了ng-options衍生物来解决我的问题：

<select ng-model="operatingSystemID" ng-options="os as os.label for os in osList track by os.id" id="download-dropdown">

我用这个作为我的osList:

//Create supported operating systems list
$scope.osList = [
{
id: "win32",
label: "Windows (32/64 bit)"
},
{
id: "mac32",
label: "Mac OS (32/64 bit)"
},
{
id: "lin32",
label: "Linux (32 bit)"
},
{
id: "lin64",
label: "Linux (64 bit)"
}
];

这是我的新detectOS功能：

$scope.detectOS = function() {
var processorArchitecture = "";
var processorArchitectureCompat = "";
var userOS = "";
var userOSNicename = "";
if (navigator.userAgent.indexOf("WOW64") != -1 || 
navigator.userAgent.indexOf("Win64") != -1 ){
processorArchitecture = "64";
} else { //Assume 32 bit
processorArchitecture = "32";
}
processorArchitectureCompat = processorArchitecture;
//Detect the OS
if (navigator.platform.indexOf("Win") != -1){
userOS = "win";
userOSNicename = "Windows";
if (processorArchitecture == "64")
processorArchitectureCompat = "32";
} 
else if (navigator.platform.indexOf("Mac") != -1){
userOS = "mac";
userOSNicename = "Mac OS";
if (processorArchitecture == "64")
processorArchitectureCompat = "32";
} 
else if (navigator.platform.indexOf("Lin") != -1){
userOS = "lin";
userOSNicename = "Linux";
}
//Check for valid detection
if (userOS != "" && processorArchitecture != "") {
//Valid match found
var optionSelectionID = userOS + processorArchitectureCompat;
//Output detected option to os message section
$scope.os_detection_box =  $sce.trustAsHtml("(We have detected your OS as " + userOSNicename + " " +processorArchitecture + " bits)");
//Auto select the detected option
$scope.operatingSystemID = {id: optionSelectionID};
}
};