为什么ng-if不能在ng-repeat内部工作

时间:2014-09-29 21:14:58

标签: javascript angularjs angularjs-ng-if

我无法正确使用我的ng-if在ng-repeat中。我已将AngularJS更新到最新版本(2014年9月27日),但仍然无法让它正常工作。我的代码在ng-repeat之外工作得很好,而且当我在ng-if =" vm.detail == false"时,我也有在ng-repeat内部工作的代码。但是ng-if =" vm.detail == true"不起作用。我甚至已经将vm.detail的值打印到控制台,它应该是正确的。但是,评估ng-if =" vm.detail == true"的代码块。 as" true"不执行。它的坚果。这是我的代码:

                    <th>Division</th>
                    <th>Pool</th>
                    <th>Subpool</th>
                    <th ng-click="sort.predicate = 'ExperienceGroup.RenewalGroup.Name'; sort.reverse = !sort.reverse">
                        RenewalGroup
                    </th>
                    <th>MCH</th>
                    <th ng-click="sort.predicate = 'ContractNumber'; sort.reverse = !sort.reverse">
                        Contract
                    </th>
                    <th ng-click="sort.predicate = 'PlanCode'; sort.reverse = !sort.reverse">
                        PlanCode
                    </th>

                </tr>

                <!--Search By: Mch, Contract Number, Mcp, PlanCode--> 
                <tr ng-if="vm.detail == true">
                    <th>Trust</th>
                    <th>MCH</th> 
                    <th>Contract</th> 
                    <th>Plan Code</th> 
                    <th>Status Date</th> 
                    <th>Status</th> 
                    <th>Effective Date</th> 
                    <th >MCP</th>
                    <th >Rates</th>
                    <th>State Availability</th>
                </tr>

            </thead>
            <tbody>


                <!--Data for MchNumber, ContractNumber, PlanCode Searches-->
                <tr ng-repeat="vm in vm.Mch2Information" ng-if="vm.detail == 'true'">
                    <!--<th>{{vm.CustomerNumber}}</th>-->
                    <td> {{vm.TrusteeCustNum}}</td>
                    <td>{{vm.CustomerNumber}}</td>
                    <td>{{vm.ContractNumber}}</td>
                    <td>{{vm.PlanCode}}</td>
                    <td>{{vm.PlanStatusDate}}</td>
                    <td>{{vm.PlanStatus}}</td>
                    <td> {{vm.PlanEffectiveDate}}</td>
                    <td>{{vm.Mcp}}</td> <!--Not yet implemented-->
                    <td><a href="">Rates</a></td>
                    <td><a href="">State Availability</a></td>

                </tr>



                <!--Data for Division, Pool, Subpool, and RenewalGroup Searches-->
                <tr ng-repeat="plan in vm.plans  
                    | filter: {MchNumber : planFilter.Mch} 
                    | limitTo: vm.pageSize" ng-if="vm.detail == false">

                    <td>{{plan.ExperienceGroup.RenewalGroup.Subpool.Pool.Division.DivisionName}}</td>
                    <td>{{plan.ExperienceGroup.RenewalGroup.Subpool.Pool.PoolName}}</td>
                    <td>{{plan.ExperienceGroup.RenewalGroup.Subpool.SubpoolName}}</td>
                    <td>{{plan.ExperienceGroup.RenewalGroup.RenewalGroupName}}</td>
                    <td><a href="#/Mch/MCH/{{plan.MchNumber}}">{{plan.MchNumber}}</a></td>
                    <td>{{plan.PlanDesign.ContractNumber}}</td>
                    <td>{{plan.PlanDesign.PlanCode}}</td>
                    <td>{{plan.Mcp}}</td>
                  </tr>

控制器:

    function getPlans(searchParameters)
    {
        vm.loadingPlans = true; vm.search = searchParameters;
        mchService.searchParameters = searchParameters.MchNumber;
        datacontext.getAssignedPlans(searchParameters, vm.pageSize).then(function (plans)
        {
            vm.plans = plans;

      //Compares which columns are being populated for choosing which headings to show
        if (vm.search.MchNumber != null 
            ||vm.search.ContractNumber != null 
            || vm.search.PlanCode != null)
        {
            vm.detail = true;
            vm.test = !vm.test;
            alert("vm.detail is: " + vm.detail)
            //vm.detail = !vm.detail;
            //If users enter JUST a MCH number then display those results
            if (vm.search.ContractNumber == null & vm.search.PlanCode == null)
            {
                vm.getEntityInformation();
            }

        }

        if (vm.search.DivisionName != null
            || vm.search.PoolName != null
            || vm.search.SubpoolName != null
            || vm.search.RenewalGroupName != null)
        {
            vm.detail = false;
            alert("vm.detail is: " + vm.detail);
           // vm.detail = !vm.detail;
        }

            //Sets values to NULL after every search is performed
       vm.search.MchNumber =
       vm.search.ContractNumber =
       vm.search.PlanCode =
       vm.search.DivisionName =
       vm.search.PoolName =
       vm.search.SubpoolName =
       vm.search.RenewalGroupName = null;

        }).finally(function () { vm.loadingPlans = false; });   
    }

1 个答案:

答案 0 :(得分:0)

请更新那一位。

<tr ng-repeat="vm in vm.Mch2Information" ng-if="vm.detail == 'true'">
    <!--<th>{{vm.CustomerNumber}}</th>-->
    <td>{{vm.TrusteeCustNum}}</td>
    <td>{{vm.CustomerNumber}}</td>
    <td>{{vm.ContractNumber}}</td>
    <td>{{vm.PlanCode}}</td>
    <td>{{vm.PlanStatusDate}}</td>
    <td>{{vm.PlanStatus}}</td>
    <td>{{vm.PlanEffectiveDate}}</td>
    <td>{{vm.Mcp}}</td>
    <!--Not yet implemented-->
    <td><a href="">Rates</a>
    </td>
    <td><a href="">State Availability</a>
    </td>
</tr>

到:

<tr ng-repeat="info in vm.Mch2Information" ng-if="vm.detail == 'true'">
    <!--<th>{{vm.CustomerNumber}}</th>-->
    <td>{{info.TrusteeCustNum}}</td>
    <td>{{info.CustomerNumber}}</td>
    <td>{{info.ContractNumber}}</td>
    <td>{{info.PlanCode}}</td>
    <td>{{info.PlanStatusDate}}</td>
    <td>{{info.PlanStatus}}</td>
    <td>{{info.PlanEffectiveDate}}</td>
    <td>{{info.Mcp}}</td>
    <!--Not yet implemented-->
    <td><a href="">Rates</a>
    </td>
    <td><a href="">State Availability</a>
    </td>
</tr>