我正在尝试创建一个页面，人们可以在其中注册特定类(class)，我能够正确显示，但是在执行 ng-repeat 时，所有注册按钮都会切换，这是不正确的，我也想显示根据我在数据中返回的 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();
}]
);
最佳答案
您正在使用寄存器作为全局变量。 您应该将注册的属性重复设置到模型中，或者，如果您想使其保持“全局”，您应该将索引参数添加到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
};
这些按钮会一起切换，因为您只有一个变量来控制所有按钮。
ng-click="toggleRegister(true)" ng-show="!register"
应该是
ng-click="toggleRegister(true, session.session_id)" ng-show="!session.registration.registration_id == 1"
关于javascript - 解耦按钮(2个按钮同时切换)并根据数据显示适当的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37166025/