使用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>
     ...

现在跟踪后我发现“ng-click”正在执行将标志值从1更改为0的操作，反之亦然。虽然我无法调试为什么ng-hide没有同时执行其操作，但请帮忙！

Answer 1

试试这个......

<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