Question

我正在创建一个名为＆＃34; combo＆＃34;的自定义指令。我从主控制器传递选项，但我需要从父控制器中选择值。

情景：

渲染：

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

结合

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

问题

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是一个有效的plunker：http://plnkr.co/edit/TEh9kauHCVfCPSw552c9?p=preview

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

看看它！

Angularjs自定义指令用于选择

1 个答案: