使用angularjs切换列表项的显示/隐藏

Question

 var myApp = angular .module("myApp", []) .controller("listController", function($scope) { var foodList = [ { name : 'Hyderbadi Koma', types : [ { name : "sweet" }, { name : "extra chatpata" }, { name : "chatpata" } ], flag: 0 }]; ... $scope.showhide = function(foodLists) { if (foodLists.flag == 0) foodLists.flag++; else foodLists.flag--; }; }); 

 ... <td class="leftSection"> <ul> <li ng-repeat="foodItem in foodList" ng-click="showhide(foodItem)" class="clic"> {{ foodItem.name }} <ul> <li ng-repeat="foodType in foodItem.types" ng-hide="{{ foodItem.flag | filtering }}" class="unclic"> {{ foodType.name }} ///For watching variable flag {{foodItem.flag}} </li> </ul> </li> </ul> ... 

Now here after tracing i found that "ng-click" is performing its action of changing the flag value from 1 to 0 and vice versa. Though I am not able to debug why ng-hide is not performing its action simultaneously, please help!

Answer 1

try this...

<td>
      <ul ng-repeat="foodItem in foodList">
        <li class="clic">
          <a href="#" ng-click="showhide(foodItem)"> {{ foodItem.name }}</a>

            <ul ng-repeat="foodType in foodItem.types">
              <li  ng-hide="{{ foodItem.flag}}" class="unclic">
                {{ foodType.name }}
              </li>
            </ul>
        </li>
      </ul>
    </td>

https://plnkr.co/edit/sTWHI3SQeKgNN7QoOrrw