javascript - 在同一 Controller 中使用范围变量进行 Angular 循环

Question

我有 2 个作用域变量，如下所示:

 $scope.degrees =[{DegreeCategoryID:"1",DegreeCategory:"Accounting",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"2",DegreeCategory:"Advanced Manufacturing/Mechatronics Technology",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"3",DegreeCategory:"Air Conditioning and Refrigeration Technology",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"4",DegreeCategory:"Auto Body Technology",DegreeCategoryType:"Applied Sciences"},
                {DegreeCategoryID:"78",DegreeCategory:"Associate in Sciences",DegreeCategoryType:"Academic"},
                {DegreeCategoryID:"79",DegreeCategory:"Associate of Arts in Teaching",DegreeCategoryType:"Academic"},
                {DegreeCategoryID:"80",DegreeCategory:"Emphasis",DegreeCategoryType:"Academic"},
                {DegreeCategoryID:"81",DegreeCategory:"Field of Study",DegreeCategoryType:"Academic"}];

$scope.degreecategories=[{DegreeID:"1",DegreeCategoryID:"1",Degree:"Accounting AAS ",DegreeTypeID:"2",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
            {DegreeID:"2",DegreeCategoryID:"1",Degree:"Accounting Assistant Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
            {DegreeID:"3",DegreeCategoryID:"1",Degree:"Accounting Clerk Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
            {DegreeID:"4",DegreeCategoryID:"1",Degree:"Advanced Technical Certificate in Professional Accountancy",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
            {DegreeID:"5",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"6",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
            {DegreeID:"7",DegreeCategoryID:"3",Degree:"Air Conditioning and Refrigeration Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"8",DegreeCategoryID:"3",Degree:"Profit Center Manager Enhanced Skills Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"9",DegreeCategoryID:"3",Degree:"Residential - Technician I Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"10",DegreeCategoryID:"3",Degree:"Residential - Technician III Level II Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"11",DegreeCategoryID:"3",Degree:"Residential AAS ",DegreeTypeID:"2",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
            {DegreeID:"12",DegreeCategoryID:"4",Degree:"Auto Body Metal Technician Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""}];

我的上述两个变量都存在于同一个 Controller 中。我试图以这样的方式显示数据，当我单击名为“学术”的按钮时，它会显示来自 $scope. Degrees 的所有 DegreeCategoryType:"Academic" 变量> 使用过滤器。(直到这里它工作正常)

现在我想根据我在列表中所做的选择显示上一个列表之后的另一个列表，即。当我从上面的列表中单击一个选择时，我想显示 $scope. Degreecategories 中的详细信息，以便它根据 DegreeCategoryID 进行匹配和过滤。我该如何处理这个问题？我已经发布了这个问题，但我试图传达的信息不正确。

Answer 1

标记主列表

        <div ng-show="display.academic" class="col-lg-4 col-md-4 col-sm-4">
            <div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
                <div class="panel-heading">
                    <h3 class="panel-title">Academic</h3>
                </div>
                    <a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Academic'}" class="list-group-item">
                      <li ng-click="showAcademic(degree)" >{{degree.DegreeCategory}}</li>
                    </a>
            </div>
        </div>

标记子列表

        <div ng-show="display.academiccourse" class="col-lg-9 col-md-9 col-sm-9">
            <div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
                <div class="panel-heading">
                    <h3 class="panel-title">{{DegreeCategory}}</h3>
                </div>
                    <a href='#' ng-repeat="degree in degreecategories | filter:{DegreeCategoryID:filterSub}" class="list-group-item">
                      <li ng-click="display.appliedsciencescourse" >{{degree.Degree}}</li>
                    </a>
            </div>
        </div>

JS

$scope.showAcademic = function(degree){
    $scope.DegreeCategory = degree.DegreeCategory;
    $scope.filterSub = degree.DegreeCategoryID;
    $scope.display.academiccourse = true;
};