Angularjs - NG-Repeat 1つのアイテムを一度に表示

Question

ここでいくつかのアイデアを探しています。私は食事の配列を含む食事プランオブジェクトを持っています。一度にプライマリとして設定できる食事は1つだけですが、ユーザーは食事の配列を切り替えて、食事を原本としてマークすることができます。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

プランに財産を添付することができ、それが主な計画であるかどうかを言う旗で。

サンプル実装：

  $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>

.

プロパティを添付していない場合は、コントローラの選択した索引プロパティのようなものを使用できます。