2016-08-04 5 views
0

私は非常に単純なitemControllerを持っています。これにはアイテムの配列が含まれています(実際にはAPIから取得されます)。 itemForm.item select(itemForm.item.idのすべてのサブセクションを取得)から選択された項目に基づいてサブセクションを取得するには、APIを再度呼び出す必要があります。AngularJSは、コントローラへの選択と渡しのパラメータでフォームを更新します。

Item1(id = 1)を選択すると、そのitem.idのサブセクションを含むようにフォームを更新したいとします。私が抱えている問題は、sectionControllerにitemForm.item.idをどのように正確に渡すかということです。以下に見られるように、私は$ attrsで試しましたが、実際の値の代わりに "{{itemForm.item.id}}"の文字列を渡してしまいます。

私はAngularを初めて使っていますが、これはまったく間違った方向に進んでいる可能性が高いので、私のアプローチでは完全に根本的に外れているかどうか教えてください。

のJavascript

angular.module('app').controller('itemController', function(){ 
this.items = [ 
    { 
    "id": 1, 
    "name": "Item1" 
    }, 
    { 
    "id": 2, 
    "name": "Item2" 
    }, 
    { 
    "id": 3, 
    "name": "Item3" 
    } 
]; 
}]; 

angular.module('app').controller('sectionController', 
['SectionService', '$attrs', 
function(SectionService, $attrs){ 
var store = this; 

SectionService.getSections($attrs.id) 
    .then(function(data) { 
     store.sections = data; 
    }, function(error) { 
     // promise rejected 
     console.log(error); 
    }); 

}]); 

HTML

<div class="form-group" ng-controller="itemController as item"> 
    <select ng-model="itemForm.item" ng-options="item as item.name for item in item.items track by item.id" required> 
    </select> 

    <!-- this is just a test to try to get the behavior to work correctly --> 
    <div ng-controller="sectionController as section" id="{{$itemForm.item}}"> 
     <p ng-repeat="section in section.sections">{{section.name}}</p> 
    </div> 
</div> 

SectionServiceは単にAPIを呼び出し、そのような特定のアイテムIDは、この(アイテムID = 1この場合)としてJSON配列を返すファクトリであります:

[ 
    { 
    "name": "Section1", 
    "itemID": 1, 
    "sectionID": 1 
    }, 
    { 
    "name": "Section2", 
    "itemID": 1, 
    "sectionID": 2 
    }, 
    { 
    "name": "Section3", 
    "itemID": 1, 
    "sectionID": 3 
    }, 
    { 
    "name": "Section4", 
    "itemID": 1, 
    "sectionID": 4 
    } 
] 

答えて

0

SectionControllerがロードされているときにSectionServiceが1回だけ呼び出されます。初めて。

あなたは$スコープを使用する必要が$あなたはそれがSectionServiceにitemForm.itemの値が変更するたびに電話をかけたい場合は$ attrs.idへの変化を観察するために見る:すべての

angular.module('app').controller('sectionController', 
['SectionService', '$attrs', '$scope', 
function(SectionService, $attrs, $scope){ 
var store = this; 

$scope.$watch(
    function(){ return $attrs.id; }, 
    function(){ 
    if($attrs.id){ 
     SectionService.getSections($attrs.id) 
      .then(function(data) { 
       store.sections = data; 
     }, function(error) { 
      // promise rejected 
      console.log(error); 
     }); 
    } 
    } 
}]); 
0

まず、あなたをtrack byas式を使用してはならない場合は、そのうちの1つのみを使用してください。 docsから

は、AS SELECTを使用する場合は注意してくださいと同じ式にすることにより追跡します。

私はこのように使用することができことをお勧めしたい:取得する

  1. 使用ngChangeディレクティブ:

    <select class="form-control" ng-model="itemForm.item" ng-options="item.name for item in item.items track by item.id" ng-change="item.change(itemForm.item.id)" required> 
    

    さて、あなたが望むものを達成するために、あなたはいくつかのことをしなければなりませんidあなたの親の中にselectedあなたの親のcontroller

ng-change="item.change(itemForm.item.id)" 
  • を注入両方controllers$scope

  • :子供に dataを送信するために

  • 使用$broadcastcontroller

  • $scope.$broadcast('id', id); 
    
  • 使用$oncontrollerからデータを受信するために、
      $scope.$on('id', function(event, id) { 
          ... 
      }); 
      

      ここ完全な例です:

      (function() { 
       
          'use strict'; 
       
      
       
          angular 
       
          .module('app', []) 
       
          .controller('itemController', itemController) 
       
          .controller('sectionController', sectionController) 
       
          .factory('SectionService', SectionService); 
       
      
       
          sectionController.$inject = ['$scope']; 
       
          
       
          function itemController($scope) { 
       
          var vm = this; 
       
          vm.change = change; 
       
          vm.items = [ 
       
           { 
       
            "id":1, 
       
            "name":"Item1" 
       
           }, 
       
           { 
       
            "id":2, 
       
            "name":"Item2" 
       
           }, 
       
           { 
       
            "id":3, 
       
            "name":"Item3" 
       
           } 
       
          ]; 
       
          
       
          function change(id) { 
       
           // send data to child controller 
       
           $scope.$broadcast('id', id); 
       
          } 
       
          } 
       
          
       
          sectionController.$inject = ['SectionService', '$scope']; 
       
          
       
          function sectionController(SectionService, $scope) { 
       
          var store = this; 
       
          var id = 1; 
       
          // It's only to work here... 
       
          var fakeData = [ 
       
           { 
       
            "name":"Section1", 
       
            "itemID":1, 
       
            "sectionID":1 
       
           }, 
       
           { 
       
            "name":"Section2", 
       
            "itemID":1, 
       
            "sectionID":2 
       
           }, 
       
           { 
       
            "name":"Section3", 
       
            "itemID":1, 
       
            "sectionID":3 
       
           }, 
       
           { 
       
            "name":"Section4", 
       
            "itemID":1, 
       
            "sectionID":4 
       
           } 
       
          ]; 
       
          
       
          function getSuccess(response) { 
       
           // store.sections = response.data; <- it should be uncommented in your real application 
       
           store.sections = fakeData; 
       
          } 
       
          
       
          function getError(response) { 
       
           console.log(response); 
       
          } 
       
          
       
          // get the broadcast 
       
          $scope.$on('id', function(event, id) { 
       
           if (!id) return; 
       
           getSuccess(); 
       
           /*SectionService.getSections(id) 
       
           .then(getSuccess) 
       
           .catch(getError); <- it should be uncommented in your real application */ 
       
          }) 
       
          } 
       
          
       
          SectionService.$inject = ['$http']; 
       
          
       
          function SectionService($http) { 
       
          var factory = { 
       
           getSections: getSections 
       
          } 
       
          
       
          return factory; 
       
          
       
          function getSections(id) { 
       
           //return $http.get('url' + id); <- it should be uncommented in your real application 
       
          } 
       
          } 
       
      })();
      <!DOCTYPE html> 
       
      <html ng-app="app"> 
       
      
       
      <head> 
       
          <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
       
          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"> 
       
      </head> 
       
      
       
      <body> 
       
          <div class="form-group" ng-controller="itemController as item"> 
       
          <select class="form-control" ng-model="itemForm.item" ng-options="item.name for item in item.items track by item.id" ng-change="item.change(itemForm.item.id)" required> 
       
           <option value="" label="Select item" hidden> 
       
          </select> 
       
          <hr> 
       
          <div ng-controller="sectionController as section"> 
       
           <p ng-repeat="section in section.sections" ng-bind="section.name"></p> 
       
          </div> 
       
          </div> 
       
      </body> 
       
      
       
      </html>

      してください、私はスニペットでここ仕事ができなかった部分をコメントし、それが動作するはずノートあなたの実際のアプリケーションで。

      私はこのtutorialをチェックすることをお勧めします。

  • 関連する問題