與父親兒童組合的動態表單

Question

我對AngularJS非常陌生，在觀看一些複合視頻後，我決定使用它創建一個簡單的網頁。

頁面最初應該加載一個由ajax請求（包含所有數據）填充的選擇框。然後，根據所選的值，可能需要創建一個包含子數據的新選擇元素。這將繼續發生，直到選擇沒有孩子ID的選項。我從api獲取的數據格式如下。

[ { "ChildIds" : [ ], 
    "Id" : "1", 
    "Name" : "Top Level", 
    "ParentId" : null 
    }, 
    { "ChildIds" : [ "51" ], 
    "Id" : "22", 
    "Name" : "LevelA - 1", 
    "ParentId" : "1" 
    }, 
    { "ChildIds" : [ "38", 
     "26" 
     ], 
    "Id" : "24", 
    "Name" : "LevelA - 2", 
    "ParentId" : "1" 
    }, 
    { "ChildIds" : [ ], 
    "Id" : "38", 
    "Name" : "LevelB - 1", 
    "ParentId" : "24" 
    }, 
    { "ChildIds" : [ ], 
    "Id" : "26", 
    "Name" : "LevelB - 2", 
    "ParentId" : "24" 
    }, 
    { "ChildIds" : [ ], 
    "Id" : "51", 
    "Name" : "LevelB - 3", 
    "ParentId" : "22" 
    }, 
    { "ChildIds" : [ "43", 
     "21" 
     ], 
    "Id" : "36", 
    "Name" : "LevelC - 1", 
    "ParentId" : "26" 
    }, 
    { "ChildIds" : [ ], 
    "Id" : "43", 
    "Name" : "LevelD - 1", 
    "ParentId" : "36" 
    }, 
    { "ChildIds" : [ ], 
    "Id" : "21", 
    "Name" : "LevelD -2", 
    "ParentId" : "36" 
    } 
] 

我設法用硬編碼選擇元素得到這個工作，但要使這個充滿活力。

的Html

<div class="container"> 
     <div ng-controller="organisationalUnitCtrl"> 
      <select class="form-control" ng-model="root" ng-options="ou.Name for ou in ous | filter:{ParentId:'!'}"> 
       <option value="">-- choose organisation unit --</option> 
      </select> 
      <select class="form-control" ng-model="child" ng-options="ou.Name for ou in ous | filter:{ParentId:root.Id}"> 
       <option value="">-- choose organisation unit --</option> 
      </select> 
      <select class="form-control" ng-model="child2" ng-options="ou.Name for ou in ous | filter:{ParentId:child.Id}"> 
       <option value="">-- choose organisation unit --</option> 
      </select> 
      <select class="form-control" ng-model="child3" ng-options="ou.Name for ou in ous | filter:{ParentId:child2.Id}"> 
       <option value="">-- choose organisation unit --</option> 
      </select> 
     </div> 
    </div> 

控制器

bristowRiskApp.controller('organisationalUnitCtrl', 
    function organisationalUnitCtrl($scope, organisationalUnitData) { 
     $scope.ous = organisationalUnitData.getOrganisationalUnit(); 
    } 
); 

服務

bristowRiskApp.factory('organisationalUnitData', function ($http, $q) { 
    return { 
     getOrganisationalUnit: function() { 
      var deferred = $q.defer(); 

      $http({ method: 'GET', url: 'http://localhost:53995/api/organisationalunit' }). 
       success(function (data, status, headers, config) { 
        deferred.resolve(data); 
       }). 
       error(function (data, status, headers, config) { 
        deferred.reject(status); 
       }); 

      return deferred.promise; 
     } 
    } 
}); 

我已閱讀，你應該不是人在控制器中使用DOM。所以，我猜測我應該爲我的select元素創建一個指令來監聽onChange事件並創建新的select元素？我該怎麼做呢？我能從中學到什麼樣的例子嗎？

我在硬編碼示例中遇到的另一個問題是，更改select中的值只會漣漪到下一個組合。例如，如果在所有四個選擇框中選擇了值，則更改第二個框中的值將正確地重置第三個框，但第四個框仍將包含所選的選項。我認爲這種變化會一路波瀾起伏。

感謝

史蒂芬

Answer 1

讓我知道如果/爲什麼這不工作，我會相應地解決它。我認爲關鍵的事實是在選項中繼器中，您沒有使用語法來指定選項的ID - 您只是在做它的標籤。

http://jsfiddle.net/KVdqb/

HTML

<div ng-app="bristowRiskApp" ng-controller="organisationalUnitCtrl"> 
    $scope.selections: <pre>{{ selections | json }}</pre> 
    <div ng-repeat="i in range(selections.length - 1)"> 
     <cascade-select data="data" parent-id="selections[i]" selected-id="selections[i + 1]"></cascade-select> 
    </div> 
</div> 

的Javascript

var bristowRiskApp = angular.module('bristowRiskApp', []); 

bristowRiskApp.controller('organisationalUnitCtrl', 

function organisationalUnitCtrl($scope) { 
    $scope.data = [ /* ... */ ]; 

    $scope.selections = [ null, null ]; 

    $scope.$watch('selections', function (value) { 
     if (value[value.length - 1] !== null || value.length < 2) { 
      value.push(null); 
     } else { 
      var index = value.indexOf(null, 1); 
      if (0 < index && index < value.length - 1) { 
       $scope.selections = value.slice(0, index); 
      } 
     } 

    }, true); 

    // Helper function.  
    $scope.range = function (n) { 
     var result = []; 

     for (var i = 0 ; i <n; i++) { 
      result.push(i); 
     } 

     return result; 
    }; 
}); 

bristowRiskApp.directive('cascadeSelect', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     scope: { 
      parentId: '&', 
      selectedId: '=', 
      data: '=' 
     }, 
     template: '<select ng-show="(data | filter:byId).length > 0" ng-model="selectedId" ng-options="d.Id as d.Name for d in data | filter:byId"><option value="">-- choose organisation unit --</option></select>', 
     link: function (scope, element, attrs) { 
      scope.byId = function (d) { 
       return d.ParentId === scope.parentId(); 
      }; 
     } 
    } 
});