通过 angularjs 中的选择来选择函数答案

【问题标题】：choose function by select in angularjs通过 angularjs 中的选择来选择函数
【发布时间】：2014-04-14 13:16:08
【问题描述】：

我有 2 个选择和一个具有功能的按钮。我想检查是否选择了位置，然后执行代码的位置部分，如果选择了分配，则执行代码的分配部分。如果两者在 api 中都为空，则它可以工作；），然后我可以更改其中一个。

$scope.edit_location = function() {
    for(var i = 0; i < $scope.inventories.length; i++) {
        if($scope.currentInventory.location){

            console.log('I am in location');
            var copySelectedInv = Restangular.copy($scope.currentInventory);
            copySelectedInv.customPUT({location: $scope.currentInventory.location, assigned: null,  tags: $scope.inventories[i].tags}); 

        }else if ($scope.currentInventory.assigned){

            console.log('I am in assigned');
            var copySelectedInv2 = Restangular.copy($scope.currentInventory);
            copySelectedInv2.customPUT({location: null, assigned: $scope.currentInventory.assigned,  tags: $scope.inventories[i].tags});    
        }
    }
};

我的模板选择

 <select class="input-medium form-control" ng-model="currentInventory.location">
        <option value="">Choose location</option>
        <option value="{{location.resource_uri}}" ng-repeat="location in locations">{{location.name}}</option>  
</select>
<h5>Assigne to employee</h5>
 <select class="input-medium form-control" ng-model="currentInventory.assigned">
        <option value="">Choose location</option>
        <option value="{{user.resource_uri}}" ng-repeat="user in users">{{user.first_name + ' ' + user.last_name}}</option> 
</select>

<button class="btn tbn-lg btn-success" ng-click="edit_location()">

【问题讨论】：

您需要两个选定的值互斥，对吗？检查我更新的答案。

标签： javascript angularjs restangular

【解决方案1】：

我会改用ng-options：

<select class="input-medium form-control" ng-model="currentInventory.location" 
        ng-options="location.resource_uri as location.name for location in locations">
        <option value="">Choose location</option> 
</select>

如果您需要选择一个值会取消选择另一个值，一个快速的解决方案是：

$scope.$watch("currentInventory.assigned",function(newValue,oldValue,scope){
    scope.currentInventory.location = null;
});

$scope.$watch("currentInventory.location",function(newValue,oldValue,scope){
    scope.currentInventory.assigned = null;
});

另一种解决方案是将object 绑定为值，而不仅仅是resource_uri 属性：

<select class="input-medium form-control" ng-model="currentInventory" 
            ng-options="location.name for location in locations">
            <option value="">Choose location</option> 
</select>

并检查它是位置还是用户：

$scope.edit_location = function() {
    for(var i = 0; i < $scope.inventories.length; i++) {
        if($scope.locations.indexOf($scope.currentInventory)>=0){

            console.log('I am in location');
            var copySelectedInv = Restangular.copy($scope.currentInventory);
            copySelectedInv.customPUT({location: $scope.currentInventory.location, assigned: null,  tags: $scope.inventories[i].tags}); 

        }else if ($scope.users.indexOf($scope.currentInventory)>=0){

            console.log('I am in assigned');
            var copySelectedInv2 = Restangular.copy($scope.currentInventory);
            copySelectedInv2.customPUT({location: null, assigned: $scope.currentInventory.assigned,  tags: $scope.inventories[i].tags});    
        }
    }
};

【讨论】：