試圖自動選擇基於用戶操作系統

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，這是我用來找到元素，所以我可以將「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

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