通过ng-option多次下拉不起作用

Question

我们在表单中通过<div ng-app="SelectApp"> <div ng-controller="selectController"> <select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)" ng-options="category.name group by category.group for category in categories"> </select> <select name="category-group" id="categoryGroup2" class="form-control" ng-model="itemSelected" ng-change="onCategoryChange(itemSelected)" ng-options="category.name group by category.group for category in categories"> </select> </div> 进行多次下拉，但如果我们更改一个下拉列表，则所选值也会被分配到另一个下拉列表中。

'use strict';
var app = angular.module('SelectApp', [ ]);
app.controller('selectController', ['$scope', '$window', function ($scope, $window) {
    $scope.categories = [       
      { id: 0, name: "Select a category..."},
        { id: 1, name: "Cars", group : "- Vehicles -" },
       { id: 2, name: "Commercial vehicles", disabled: false,group : "- Vehicles -" },
       { id: 3, name: "Motorcycles", disabled: false, group : "- Vehicles -"  },
       { id: 4, name: "Car & Motorcycle Equipment", disabled: false,
       group : "- Vehicles -" },
       { id: 5, name: "Boats", disabled: false, group : "- Vehicles -"  },
       { id: 6, name: "Other Vehicles", disabled: false, group : "- Vehicles -"  },
       { id: 7, name: "Appliances", disabled: false , group : "- House and Children -" },
       { id: 8, name: "Inside", disabled: false,group : "- House and Children -"  },
       { id: 9, name: "Games and Clothing", disabled: false,group : "- House and Children -"  },
       { id: 10, name: "Garden", disabled: false,group : "- House and Children -"  }
    ];

    $scope.itemSelected = $scope.categories[0];

    $scope.onCategoryChange = function () {
        $window.alert("Selected Value: " + $scope.itemSelected.id + "\nSelected Text: " + $scope.itemSelected.name);

    };
}]);     

JS代码：

            #############################################################
            # This function will create a handler for a specific 
            # adapter on the new host, so these get used for processing.
            # [direction]: 'Receive','Send'
            #############################################################
            function CreateBizTalkAdapterHandler(
                [string]$adapterName,
                [string]$direction,
                [string]$hostName,
                [string]$originalDefaulHostName,
                [boolean]$isDefaultHandler)
                #[boolean]$removeOriginalHostInstance)
            {
                if($direction -eq 'Receive')
                {
                    [System.Management.ManagementObject]$objAdapterHandler = ([WmiClass]"root/MicrosoftBizTalkServer:MSBTS_ReceiveHandler").CreateInstance()
                    $objAdapterHandler["AdapterName"] = $adapterName
                    $objAdapterHandler["HostName"] = $hostName
                }
                else
                {
                    [System.Management.ManagementObject]$objAdapterHandler = ([WmiClass]"root/MicrosoftBizTalkServer:MSBTS_SendHandler2").CreateInstance()
                    $objAdapterHandler["AdapterName"] = $adapterName
                    $objAdapterHandler["HostName"] = $hostName
                    $objAdapterHandler["IsDefault"] = $isDefaultHandler
                }

                try
                {
                    $putOptions = new-Object System.Management.PutOptions
                    $putOptions.Type = [System.Management.PutType]::CreateOnly;

                    [Type[]] $targetTypes = New-Object System.Type[] 1
                    $targetTypes[0] = $putOptions.GetType()

                    $sysMgmtAssemblyName = "System.Management"
                    $sysMgmtAssembly = [System.Reflection.Assembly]::LoadWithPartialName($sysMgmtAssemblyName)
                    $objAdapterHandlerType = $sysMgmtAssembly.GetType("System.Management.ManagementObject")

                    [Reflection.MethodInfo] $methodInfo = $objAdapterHandlerType.GetMethod("Put", $targetTypes)
                    $methodInfo.Invoke($objAdapterHandler, $putOptions)

                    Write-Host "$adapterName $direction Handler for $hostName was successfully created" -Fore DarkGreen
                }
                catch [System.Management.Automation.RuntimeException]
                {
                    if ($_.Exception.Message.Contains("The specified BizTalk Host is already a receive handler for this adapter.") -eq $true)
                    {
                        Write-Host "$hostName is already a $direction Handler for $adapterName adapter." -Fore DarkRed
                    }
                    elseif($_.Exception.Message.Contains("The specified BizTalk Host is already a send handler for this adapter.") -eq $true)
                    {
                        Write-Host "$hostName is already a $direction Handler for $adapterName adapter." -Fore DarkRed
                    }
                    else {
                        write-Error "$adapterName $direction Handler for $hostName could not be created: $_.Exception.ToString()"
                    }
                }

                #if($removeOriginalHostInstance)
                #{
                    #DeleteBizTalkAdapterHandler $adapterName $direction $originalDefaulHostName
                #}
            }

Answer 1

我按如下方式更改了您的代码。希望这会奏效。

app.js

$scope.itemSelected = $scope.categories[0];
$scope.itemSelected1 = $scope.categories[0];
$scope.onCategoryChange = function (item,index) {

    $window.alert("Selected Value: " + item.id + "\nSelected Text: " + item.name);

};
}]);

视图

<div ng-app="SelectApp">
<div ng-controller="selectController">

<select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected"                                          ng-change="onCategoryChange(itemSelected)" 
    ng-options="category.name group by category.group for category in categories">

</select>

<select name="category-group" id="categoryGroup" class="form-control" ng-model="itemSelected1"                                          ng-change="onCategoryChange(itemSelected1)" 
    ng-options="category.name group by category.group for category in categories">

</select>

</div>