Пользовательская директива Angularjs для выбора

Я создаю пользовательскую директиву с именем «combo». я передаю ему параметры от главного контроллера, однако мне нужно получить значение, выбранное из родительского контроллера.Пользовательская директива Angularjs для выбора

Сценарий:

Rendering:

У меня есть массив называется $ scope.fields, который содержит различные типы элементов, которые будут представлены пользователю. Я зацикливаюсь в этом массиве, чтобы проверить рисование текстового ввода или комбо.

Связывание

$ scope.fieldValues  синхронизируется, что значения данных от пользователя. Ввод текста меняет значение в fieldValues [$ index] .value. Поэтому я могу получить окончательные значения из fieldValues, указав относительный индекс.

Проблема

Как я могу сделать комбо переплетены в его ассоциированных FieldValues [$ индексных] .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>

источник

2015-12-10 Coding

Вот рабочий plunker с тем, что вы хотите: http://plnkr.co/edit/TEh9kauHCVfCPSw552c9?p=preview

Дело в том, что вы используете изолированную сферу директив, так что вы должны передать fieldValues[$index].value к нему.

Посмотрите на это!

источник

2015-12-10 16:52:38

Спасибо Ignacio. – Coding

Есть ли способ достичь этого, но с ng-опциями вместо ng-repeat? – CJLopez

Пользовательская директива Angularjs для выбора

ответ

Смежные вопросы