Question

在这里寻找一些想法。我有一个包含一系列餐点的膳食计划对象。一次只能将一餐用作主餐，但我希望用户能够在一系列餐食中循环并将餐点标记为主餐。我被困在试图弄清楚ngrepeat在这里是否有意义或ngswitch或ngshow。任何想法或样品都将受到高度赞赏！

我尝试了多种方法但没有运气。感谢

Answer 1

您可以按膳食指数循环吃饭，并有一个按钮来选择这样的膳食：

http://jsfiddle.net/c6RZK/

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

app.controller('MealsCtrl',function($scope) {
    $scope.meals = [
        {name:'Meatloaf'},
        {name:'Tacos'},
        {name:'Spaghetti'}
    ];

    $scope.meal_index = 0;
    $scope.meal = {};

    $scope.next = function() {
        if ($scope.meal_index >= $scope.meals.length -1) {
            $scope.meal_index = 0;
        }
        else {
            $scope.meal_index ++;
        }
    };

    $scope.choose = function(meal) {
        $scope.meal = meal;
    }
});

HTML

<div ng-app="mealsApp" ng-controller="MealsCtrl">
    <div ng-repeat="m in meals">
        <div ng-if="meal_index == $index">
            <strong>{{m.name}}</strong>
            <button ng-click="choose(m)">Choose</button>
        </div>
    </div>
    <hr>
    <button ng-click="next()">Next</button>
    <hr>Your Choice: {{meal.name}}
</div>

Answer 2

您可以将一个属性附加到该计划中，并带有一个标记，表明它是否是主要计划。

Here's a sample implementation：

  $scope.plans = [{name:"One"}, {name:"Two"}, {name:"Three"}];

  $scope.selectPlan = function(plan) {        
    for(var i = 0, l = $scope.plans.length; i < l; i++) {
      $scope.plans[i].primary = false;
      if($scope.plans[i] === plan) {
        $scope.plans[i].primary = true;
      }
    }
  };

HTML：

<ul>
  <li ng-click="selectPlan(plan)" ng-repeat="plan in plans" ng-class="{primary: plan.primary}"><a href>{{plan.name}}</a></li>
</ul>

如果您不想附加属性，则可以在控制器上使用类似选定索引属性的内容。

AngularJS - ng-repeat一次显示一个项目

2 个答案: