AngularJS與選擇

Question

指導我採用了棱角分明1.6.5有一個問題，嘗試了一切，但沒有任何明顯的進展......

我提出了實現HTML SELECT標籤的指令，分量似乎工作，直到我嘗試獲取option value屬性中的整個對象而不是單個值或ID。 我可以輸出選項標籤的文本作爲對象的屬性或通過函數返回一些字符串。

這是一個完整的組件和問題的小提琴。 有3個例子：

1. 首屆一個似乎正常工作，它打印正確的文本，並返回正確的值

2. 第2：不工作，我想設置成整個OBJECT的模型選擇，而不是一個屬性

3. 第三：不工作，我想設置到模型的整個OBJECT選擇，而不是一個屬性，但它正確打印父函數中的文本控制器。

我怎樣才能改變我的組件，它可以同時返回一個屬性（如ID）把全部對象（JSON格式是好的）？

angular.module("myApp", ['customDrop']).controller("TestController", ['$scope', function($scope) { 
 
    var ITEM_SELECTED = { 
 
    ID: 3, 
 
    VALUE: "VALUE3" 
 
    }; 
 
    $scope.LIST = [{ 
 
     ID: 1, 
 
     VALUE: "VALUE1" 
 
    }, 
 
    { 
 
     ID: 2, 
 
     VALUE: "VALUE2" 
 
    }, 
 
    ITEM_SELECTED, 
 
    ]; 
 

 
    $scope.OBJ = { 
 
    LOTTO1: ITEM_SELECTED, 
 
    LOTTO2: ITEM_SELECTED, 
 
    LOTTO3: ITEM_SELECTED 
 

 
    }; 
 

 
    $scope.getCompleteValue = function(obj) { 
 
    return obj.ID + " - " + obj.VALUE; 
 
    } 
 
}]); 
 

 
angular.module('customDrop', []).directive('customDrop', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     dropid: '@', 
 
     dropvalue: '&', 
 
     list: '=', 
 
     ngModel: '=' 
 
    }, 
 
    require: 'ngModel', 
 
    template: '<select class="drop" ng-model="ngModel">' + 
 
     '<option ng-repeat="val in list" value="{{getId(val)}}">{{getValue(val)}}</option>' + 
 
     '</select>', 
 
    controller: ['$scope', '$parse', '$timeout', 
 
     function($scope, $parse, $timeout) { 
 
     $scope.getId = function(obj) { 
 
      return obj[$scope.dropid]; 
 
     } 
 

 
     // Can print text option as proerty of through function in parent scope. 
 
     $scope.getValue = function(obj) { 
 
      return !angular.isFunction($scope.dropvalue(obj)) ? 
 
      $scope.dropvalue(obj) : 
 
      $parse($scope.dropvalue(obj))(obj); 
 
     } 
 
     } 
 
    ] 
 
    } 
 
});

.drop { 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
 

 

 
<div ng-app="myApp" ng-controller="TestController"> 
 
    <strong>Simple Text Property (drop id intended to return the ID): (working)</strong><br> 
 
    <custom-drop dropvalue="VALUE" dropid="ID" list="LIST" ng-model="OBJ.LOTTO1"></custom-drop><br> Selected Value: {{OBJ.LOTTO1}} 
 
    <br><br><br> 
 
    <!-- using property as dropValue --> 
 
    <strong>Simple Text Property (drop id intended to return an object): (not working)</strong><br> 
 
    <custom-drop dropvalue="VALUE" dropid="" list="LIST" ng-model="OBJ.LOTTO2"></custom-drop><br> Selected Value: {{OBJ.LOTTO2}} 
 
    <br><br><br> 
 
    <!-- using function as dropValue --> 
 
    <strong>Function Text Property: (not working)</strong><br> 
 
    <custom-drop dropvalue="getCompleteValue" dropid="" list="LIST" ng-model="OBJ.LOTTO3"></custom-drop><br> Selected Value: {{OBJ.LOTTO3}} 
 
</div>

Answer 1

要設置到整個對象中選擇你要修改getId()方法返回的情況下，$scope.dropid不是通過綁定傳遞的對象（因爲使用這種方法的模型生成option的值）。另外我建議使用ngOptions來生成option元素的列表。請參見下面的代碼片段：

angular.module("myApp", ['customDrop']).controller("TestController", ['$scope', function ($scope) { 
 
    var ITEM_SELECTED = { 
 
     ID: 3, 
 
     VALUE: "VALUE3" 
 
    }; 
 
    $scope.LIST = [{ 
 
     ID: 1, 
 
     VALUE: "VALUE1" 
 
    }, 
 
     { 
 
      ID: 2, 
 
      VALUE: "VALUE2" 
 
     }, 
 
     ITEM_SELECTED, 
 
    ]; 
 

 
    $scope.OBJ = { 
 
     LOTTO1: ITEM_SELECTED.ID, 
 
     LOTTO2: ITEM_SELECTED, 
 
     LOTTO3: ITEM_SELECTED 
 

 
    }; 
 

 
    $scope.getCompleteValue = function (obj) { 
 
     return obj.ID + " - " + obj.VALUE; 
 
    } 
 
}]); 
 

 
angular.module('customDrop', []).directive('customDrop', function() { 
 
    return { 
 
     restrict: 'E', 
 
     scope: { 
 
      dropid: '@', 
 
      dropvalue: '&', 
 
      list: '<', 
 
      ngModel: '=' 
 
     }, 
 
     require: 'ngModel', 
 
     template: '<select class="drop" ng-model="ngModel" ng-options="getModelValue(val) as getOptionText(val) for val in list"></select>', 
 
     controller: ['$scope', '$parse', 
 
      function ($scope, $parse) { 
 
       $scope.getModelValue = function (obj) { 
 
        return !!$scope.dropid ? obj[$scope.dropid] : obj; 
 
       }; 
 

 
       $scope.getOptionText = function (obj) { 
 
        return !angular.isFunction($scope.dropvalue(obj)) ? 
 
         $scope.dropvalue(obj) : 
 
         $parse($scope.dropvalue(obj))(obj); 
 
       } 
 
      } 
 
     ] 
 
    } 
 
});

.drop { 
 
    width: 400px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="TestController"> 
 
    <strong>Simple Text Property (drop id intended to return the ID): </strong><br> 
 
    <custom-drop dropvalue="VALUE" dropid="ID" list="LIST" ng-model="OBJ.LOTTO1"></custom-drop><br> Selected Value: {{OBJ.LOTTO1}} 
 
    <br><br><br> 
 
    <!-- using property as dropValue --> 
 
    <strong>Simple Text Property (drop id intended to return an object): </strong><br> 
 
    <custom-drop dropvalue="VALUE" dropid="" list="LIST" ng-model="OBJ.LOTTO2"></custom-drop><br> Selected Value: {{OBJ.LOTTO2}} 
 
    <br><br><br> 
 
    <!-- using function as dropValue --> 
 
    <strong>Function Text Property: </strong><br> 
 
    <custom-drop dropvalue="getCompleteValue" dropid="" list="LIST" ng-model="OBJ.LOTTO3"></custom-drop><br> Selected Value: {{OBJ.LOTTO3}} 
 
</div>