デカップリングボタン（2つのボタンが同時にトグルしている）、データに応じて適切なボタンを表示

Question

特定のコースに登録できるページを作成しようとしていますが、正しく表示することはできますが、 ng-repeat、すべてのRegisterボタンが正しくないトグルしています。また、IDに応じて適切なボタンを表示したいと思います。たとえば、registration_id：1は既に登録されていることを示します。キャンセルボタン）とREGISTRATION_ID：2つの手段は、まだ登録されていない（

は、事前にありがとう HTML）登録ボタンを表示する必要があり

<div class="panel-group" id="accordion" role="tablist"> 
    <section class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h3 class="panel-title"> Course Information</h3> 
      <span class="registerRoaster pull-right" ng-if="register">register</span> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body course-info"> 
      <div class="row"> 
       <div class="col-xs-6"> 
        <lable class="col-xs-6 text-left h5">Course Name:</lable> 
        <span class="col-xs-6 text-center h5">{{course.name}}</span> 
       </div> 
       <div class="col-xs-6"> 
        <lable class="col-xs-6 text-left h5">Points:</lable> 
        <span class="col-xs-6 text-center h5">{{course.points}}</span> 
       </div> 
      </div> 
       <hr/> 
      <div class="row"> 
       <lable class="col-xs-12 pull-left h5"> Description:</lable> 
       <div class="col-xs-12"> 
        <textarea class="descriptionSize">{{course.description}}</textarea> 
       </div> 
      </div> 
      <div class="row"> 
       <lable class="col-xs-12 pull-left h5"> Agenda:</lable> 
       <div class="col-xs-12"> 
        <textarea class="descriptionSize">{{course.agenda}}</textarea> 
       </div> 
      </div> 
       </div> 
     </div> 
    </section> 
</div> 
<div class="panel-group" role="tablist"> 
<section class="panel panel-default"> 
    <div class="panel-heading" id="headingTwo"> 
    <h3 class="panel-title"> Available Sessions</h3> 
    <hr/> 
     </div> 
    <div class="panel-body"> 
    <div ng-repeat="session in course.sessions" class="container"> 
     <div class="session-item"> 
      <div class="row"> 
       <span class="col-xs-12 h5">{{session.session_days[0].start_date | date}}</span> 
      </div> 
      <div class="row"> 
       <div class="col-xs-4 session-address h5"> 
        {{session.location_name}} 
        <lable class="label">location</lable> 
       </div> 
       <div class="col-xs-2 session-room h5"> 
        {{session.session_days[0].room}} 
        <lable class="label">room number</lable> 
       </div> 
       <div class="col-xs-2 session-instructor h5"> 
        {{session.instructor.name}} 
        <lable class="label">instructor</lable> 
       </div> 
       <div class="col-xs-3 session-action"> 
        <button class="btn btn-primary pull-right" ng-click="toggleRegister(true)" ng-show="!register">Register</button> 
        <button class="btn btn-secondary pull-right" ng-click="toggleRegister(false)" ng-show="register">Cancel</button> 
       </div> 
      </div> 
      <hr/> 
     </div> 
    </div> 
     </div> 
</section> 
    </div> 

JS： -

angular.module('myApp') 
    .controller('RegistrationController', ['$scope', '$state','$http' , function($scope, $state, $http) { 
     'use strict'; 
     $scope.register = false; 
     $scope.init = function(){ 
      $scope.course =    { 
       "course_id": 1, 
       "name": "Course Name 1", 
       "short_name": "coursename1_ILT", 
       "description": "desc", 
       "agenda": "agenda here", 
       "points": 5, 
       "status_id": 2, 
       "sessions": [ 
        { 
         "session_id": 1, 
         "course_id": 1, 
         "status_id": 2, 
         "is_completed": false, 
         "registration": { 
          "registration_id": 1, 
          "registration_type_id": 1 
         }, 
         "instructor": { 
          "id": 110, 
          "name": "John Smith" 
         }, 
         "session_days": [ 

          { 
           "sort_order": 1, 
           "room": "4012V", 
           "duration": 4, 
           "start_date": "2016-11-30" 
          } 
         ], 
         "location_id": 1, 
         "location_name": "ALBANY - A", 
         "max_class_size": 10 
        }, 
        { 
         "session_id": 2, 
         "course_id": 2, 
         "status_id": 2, 
         "is_completed": false, 
         "registration": { 
          "registration_id": 2, 
          "registration_type_id": 2 
         }, 
         "instructor": { 
          "id": 112, 
          "name": "John Smith" 
         }, 
         "session_days": [ 

          { 
           "sort_order": 1, 
           "room": "4012V", 
           "duration": 6, 
           "start_date": "2016-12-30" 
          } 
         ], 
         "location_id": 1, 
         "location_name": "ALBANY - A", 
         "max_class_size": 10 
        }] 

      }; 

     }; 
      $scope.registration = [ 
       {name: "Registered", id: 1}, 
       {name: "Not-Registered", id: 2} 
      ]; 
     $scope.toggleRegister = function(status){ 
      $scope.register = status; 
     }; 
     $scope.init(); 
    }] 
    ); 

Answer 1

あなたはグローバル変数としてレジスタを使用しています。 あなたは繰り返しモデルに登録されたプロパティを設定する必要があり、または、あなたはそれを維持したい場合は、「グローバル」あなたはtoggleRegister関数にインデックスパラメータを追加する必要があり

$scope.toggleRegister = function(status){ 
    $scope.register = status; 
}; 

は

$scope.toggleRegister = function(status, session_id){ 
    // 1. find session with given id 
    // 2. set status for that session 
}; 

ボタンになりすべてを統治する変数が1つしかないので、一緒に切り替えています。

ng-click="toggleRegister(true)" ng-show="!register" 

でなければなりません

ng-click="toggleRegister(true, session.session_id)" ng-show="!session.registration.registration_id == 1"