My issue is with using ng-if inside an ng-repeat in AngularJS. Despite updating to the latest version on 09/27/2014, I am still unable to make it work properly. The code functions perfectly outside of ng-repeat, and also works fine inside ng-repeat when using ng-if="vm.detail == false". However, when trying to use ng-if="vm.detail == true", it does not work. I have checked the value of vm.detail in the console and it's correct, yet the block of code with ng-if="vm.detail == true" does not execute. 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'">
<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>
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)
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.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; });
}