Question

示例..我在团队A和团队B之间有匹配。当我点击team-A时，我想在团队A中添加一个“已选择”的课程，然后如果我点击团队B，我想从团队A中删除“选定”课程并将其添加到团队中-B，如果我再次点击team-B，那么我想一起删除所有课程。这是我到目前为止在play.ionic。 http://play.ionic.io/app/914bb06d2570 同样我希望它也适用于第2和第3场比赛。非常感谢帮助。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
    <script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
  </head>
  <body ng-app="app" ng-controller="matchCtrl">
    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Matches</h1>
      </ion-header-bar>
      <ion-content class="padding">
        <div ng-repeat="match in schedule" ng-init="{'awayActive': false, 'homeActive': false}">
          <div>Match {{match.matchNum}}</div>
          <div class="match">
            <div class="inline" ng-class="{'selected': awayActive}" ng-click="awayActive = !awayActive">{{match.away}}</div>
            vs
            <div class="inline" ng-class="{'selected': homeActive}" ng-click="homeActive = !homeActive">{{match.home}}</div>
          </div>
        </div>
      </ion-content>
    </ion-pane>
  </body>
</html>

JS

angular.module('app', ['ionic'])

.controller('matchCtrl', function($scope){

  $scope.schedule = [{
      matchNum: 1,
      away: 'Team A',
      home: 'Team B'
    },{
      matchNum: 2,
      away: 'Team C',
      home: 'Team D'
    },{
      matchNum: 3,
      away: 'Team E',
      home: 'Team F'
    }];

});

CSS

.selected {
  border: 2px solid blue;
}

Answer 1

如果您使用分配给每个<div ng-repeat="match in schedule" ng-init="{'awayActive': false, 'homeActive': false}" ng-init="match.selection = ''"> <div>Match {{match.matchNum}}</div> <div class="match"> <div class="inline" ng-class="{'selected': match.selection == 'away'}" ng-click="match.selection = 'away';">{{match.away}}</div> vs <div class="inline" ng-class="{'selected': match.selection == 'home'}" ng-click="match.selection = 'home';">{{match.home}}</div> </div> </div>数组对象的公共变量，您可以根据需要设置默认值，但即使您只是默认设置为空，也可以在主页和离开选项之间轻松切换，如下所示： / p>

{{1}}

演示：http://play.ionic.io/app/7a63c124586b

如何在离子/角度的2个div内的类之间切换？

1 个答案: