试图自动选择基于用户操作系统

所以我有一个活的网站在这里选项框：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，这是我用来找到元素，所以我可以将“selected”设置为true。有没有更好的方式使用角度做到这一点？

我该如何去做这项工作，是我过早或太晚调用函数的问题？

的兴趣守则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; 
    } 

    };

我还做了哪些实际工作，所以必须是别的东西我做的网站（也许在其他的.html页面Ajax风格的装载）一plunker 。

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

来源

2015-04-24 Mohammad

好了，所以我解决了问题，似乎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}; 
    } 
    };

来源

2015-04-24 12:49:32 Mohammad

试图自动选择基于用户操作系统

回答

相关问题