Question

在处理ng-repeat时遇到了一些问题。我正在为我的应用程序添加多个菜单和项目。当我点击HTML上的additems按钮时，它必须只显示项目（添加项目到菜单）div但不幸的是它发生了这样我有2个菜单示例蔬菜，非蔬菜我必须添加像鸡肉披萨等项目对于非蔬菜等和蔬菜菜单的一些水果。我觉得有一些条件用于显示和隐藏mg-repeat中的div。

任何请解决我的问题谢谢，提前。

在HTML

中

Options{..} <- execParser ...
if | not (null xml) && null eot -> ...
   | not (null eot) && null xml -> ...
   | otherwise -> error ...

在控制器

中

<div ng-init="getMenus()"><div ng-show="restaurants"><div ng-repeat="value in restaurants track by $index"><div ng-repeat="menu in value.menus track by $index"><div><h3><b>Menu Name :{{menu.title}}</b></h3></div><br><div class="settings-heading col-md-offset-2" style="background-color: #f2f2f2;"ng-show="ui.showDiv" ><input type="text" class="form-control" placeholder="Item Name" style="margin-bottom:10px;" ng-model="itemname" autocomplete="on"><div  style="float:right;"> <input type="submit" class="btn  btn-next" value="Save" style="font-weight: 600;"ng-click="addItems()"> </div</div><br><div><button  class='btn  btn-next col-md-offset-2' style='font-weight: 600;'  ng-click="ui.showDiv =!ui.showDiv">Add items to {{menu.title}}</button</div><br><div ng-repeat="value in restaurants track by $index"><div ng-repeat="menu in value.menus track by $index"><div ng-repeat="test in menu.items track by $index"><div class="settings-heading col-md-offset-2"><h3><b>Item Name :{{test.itemTitle}}</b></h3></div><br></div></div></div></div></div></div</div>

Answer 1

您也可以有条件地添加ng-hide

<div ng-controller="MyCtrl">
  <div ng-repeat="item in items" ng-hide="isHidden($index)" ng-click="hideThis($index)">
  {{item}}
  </div>
  </div>
</div>

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.items = ['Jhon', 'Jason', 'Judy', 1,2,3,4,5,6,67,8,9];
    $scope.hiddenValues = []
    $scope.hideThis = function(i) {
       $scope.hiddenValues.push(i)
    }

    $scope.isHidden = function(i)  {
    return $scope.hiddenValues.indexOf(i) > -1
    }
}

检查Fiddle

Answer 2

如果

，您可以使用数据ng 例如，

检查这个plnkr https://plnkr.co/edit/0YGCN4lLU6otixortG9l?p=preview

<div ng-repeat="n in nums">
    <p data-ng-if="n % 2==0">{{n}}</p>
</div>

将仅显示除以2的数字

这是数组

$scope.nums = [1,2,3,4,5,6,7,8];

更简单，更简单如果您修复了代码，将向您展示如何在代码中执行此操作你也可以通过返回true或false的函数来完成它您也可以使用数据显示或隐藏

ng-repeat：如何显示和隐藏ng-repeat中的div

在HTML

在控制器

2 个答案: