javascript – 带选择的AngularJS指令

2019年7月28日 140次阅读

我有一个问题使用角1.6.5并尝试了一切,但没有任何明显的进展……

我做了一个实现HTML SELECT标记的指令,该组件似乎工作,直到我尝试在选项值属性中获取整个对象而不是单个值或ID.
我可以输出option标签的文本作为对象的属性或通过函数返回一些字符串.

这是一个完整的小提琴组件和问题.
有3个例子：

>第一个似乎正常工作,它打印正确的文本并返回正确的值
>第二个：不工作,我想设置整个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>

最佳答案 要将整个OBJECT设置为模型,您必须修改getId()方法以返回对象,以防$scope.dropid未通过绑定传递(因为此方法用于生成选项的值).另外,我建议使用
ngOptions生成选项元素列表.请参阅下面的代码：

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>
点赞