Angularjs自定義指令

我正在創建一個名爲「組合」的自定義指令。我傳遞給主控制器的選項，但是我需要從父控制器中選擇值。Angularjs自定義指令

的情形：

渲染：

我有稱爲陣列$ scope.fields其中包含不同類型的控制要呈現給用戶。我在這些數組循環檢查繪製文本輸入或組合。

綁定

的$ scope.fieldValues將同步從用戶輸入的數值。文本輸入正在更改fieldValues [$ index] .value中的值。所以我可以通過指定相對索引來獲得fieldValues的最終值。

的問題

我怎樣才能綁定到其關聯fieldValues [$指數]的組合。價值。或如何從父控制器中獲取所選組合的選定項目。

<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

謝謝伊格納西奧。 – Coding

有沒有辦法達到這個目的，但用ng-options而不是ng-repeat？ – CJLopez

Angularjs自定義指令

回答

相關問題