为什么ng-if在ng-repeat中不起作用

Question

I cannot properly use my ng-if inside an ng-repeat. I've updated my AngularJS to the newest version (09/27/2014) and I still can not get it to work right. I have code that works fine outside of the ng-repeat and I also have code that works inside ng-repeat fine when I ng-if="vm.detail == false". However ng-if="vm.detail == true" does NOT work. I even have printed the value of vm.detail to the console and it's correct, as it should be. But, the block of code that evaluates ng-if="vm.detail == true" as "true" does NOT execute. It's nuts. Here is my code:

                    <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>

And the controller:

    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; });   
    }

Answer 1

Please update that bit.

<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>

to :

<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>