Angularjs自定义指令用于选择

2023年11月5日 189次阅读

我正在创建一个名为“combo”的自定义指令.我从主控制器传递选项,但我需要从父控制器中选择值.

场景：

Rendering:

我有一个名为$scope.fields的数组,其中包含要呈现给用户的不同类型的控件.我正在循环这些数组以检查绘制文本输入或组合.

Binding

$scope.fieldValues将同步从用户输入的值.
文本输入正在更改fieldValues [$index] .value中的值.所以我可以通过指定相对索引从fieldValues中获取最终值.

The Problem

如何将组合绑定到其关联的fieldValues [$index] .value.
或者如何从父控制器获取任何组合的选定项目.

 <script type="text/javascript">
   angular.module('myApp', [])

.controller('MyController', function ($scope) {
    $scope.fields = [{ name: 'customers', type: 'combo' }, { name: 'Name', type: 'text' }, { name: 'country', type: 'combo' }]
    $scope.fieldValues = [{ value: '' }, { value: '' }, { value: '' }];
    $scope.myItems = ['Item 1', 'Item 2'];
    $scope.itemId = 1;


    $scope.log = function () {
        for (var i = 0; i < $scope.fieldValues.length; i++) {
            if (!angular.isUndefined($scope.fieldValues[i].value))
                console.log($scope.fieldValues[i].value);
        }

    }
})
 
 
.directive('combo', function () {
    return {
        restrict: 'AE',
        template: '<div class="input-group"> <select ng-model="selectedItem" ng-change="changeEvent()" >' +
                    '<option ng-value="model" ng-repeat="model in items">{{model}}</option></select>' +
                    ' {{selectedItem}} </div>',
        replace: true,
        scope: {
            items: '=',
            defaultItem: '=',
            changeEvent: '&'
          
        },
        controller: function ($scope) {

        },
        link: function (scope, element, attrs) {

            scope.selectedItem = scope.items[scope.defaultItem];
            scope.changeEvent = function () {
                //console.log("changed");
                console.log(scope.selectedItem);
            }
        }
    };
});

    </script>
<body ng-app="myApp" ng-controller="MyController">
    <div ng-repeat="field in fields">
        <div ng-if="field.type == 'combo'">
            <strong>{{field.name}}</strong>
            <div combo items="myItems" default-item="itemId"></div>
        </div>
        <div ng-if="field.type == 'text'">
            <strong>{{field.name}}</strong>
            <input type="text" ng-model="fieldValues[$index].value" />
        </div>
    </div>

    <input type="button" value="log" ng-click="log()" />
</body>

最佳答案 这是一个有你想要的工作的plunker：
http://plnkr.co/edit/TEh9kauHCVfCPSw552c9?p=preview

问题是您使用的是隔离的指令范围,因此您应该将fieldValues [$index] .value传递给它.

看看吧！

点赞