Question

我是AngularJS的新手。我到目前为止所做的是，我有一个控制器，它显示一些数据。我想做什么，点击该数据，显示不同的div。做这个的最好方式是什么？想遵循MVC模式。还想将一些数据传递给另一个div。

由于

<body>
<div ng-controller="Aircraft">
    <div>
        Search: <input ng-model="search.AC">
        <table style="width:500px">
            <tbody style="background-color:#4db4fa; ">
                <tr>
                    <th scope="col">AC</th>
                    <th scope="col">Fleet</th>
                    <th scope="col">FltNum</th>
                    <th scope="col">StnFrom</th>
                    <th scope="col">StnTo</th>
                    <th scope="col">Status</th>
                </tr>
                <tr ng-repeat="Aircrafts in FlightAndAircraft | filter:search" align="center">
                    <td><button ng-click=" **** ***** HIDE THIS DIV AND DISPLAY NEXT DIV AND PASS {{Aircrafts.AC}} ***** *****" >{{Aircrafts.AC}} </button></td>
                    <td> {{Aircrafts.Fleet}}    </td>
                    <td> {{Aircrafts.FltNum}}   </td>
                    <td> {{Aircrafts.StnFrom}}  </td>
                    <td> {{Aircrafts.StnTo}}    </td>
                    <td> {{Aircrafts.Status}}   </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <table style="width:500px">
            <tbody style="background-color:#4db4fa; ">
                <tr>
                    <th scope="col">AC</th>
                    <th scope="col">Fleet</th>

                </tr>
                <tr ng-repeat="Aircrafts in FlightAndAircraft | filter:search" align="center" ng-click="go(Aircrafts)">
                    <td> {{Aircrafts.AC}}       </td>
                    <td> {{Aircrafts.Fleet}}    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

您可以设置变量以了解用户点击了数据。假设您的数据是数字：

控制器：

$scope.numbers = [1,2,3,25,78,96];
$scope.clicked = false;

HTML：

<button ng-click="clicked=true">Click</button>

<div ng-show="clicked">
  <span ng-repeat="number in numbers">{{ number }}</span>
</div>

Answer 2

点击第一个div后，您可以设置一个变量，指示下一个div是否应该可见。然后，使用ng-if进行渲染，或ng-hide / ng-show使下一个div可见。

<ul>
  <li ng-repeat="p in people" class="badge" >
    <div ng-click="p.visible = !p.visible">{{p.id}}</div>
    <div ng-if="p.visible" class="badge alert-success">{{p.name}}</div>
  </li>
</ul>

这是一个示例模型。

$scope.people = [{name: 'igor', id: 0}, {name: 'misko', id: 1}];

以下是演示：http://plnkr.co/yJ0CuSsm25N4VAI1hBDZ

<强>更新

您可以执行以下操作来显示飞机桌的下一行：

<tr ng-repeat="Aircrafts in FlightAndAircraft" align="center" ng-show="visible.index == $index">
    <td> 
      <input type="button" ng-click="visible.index = $index + 1" value={{Aircrafts.AC}} /> 
    </td>
    <td> {{Aircrafts.Fleet}}    </td>
    <td> {{Aircrafts.FltNum}}   </td>
    <td> {{Aircrafts.StnFrom}}  </td>
    <td> {{Aircrafts.StnTo}}    </td>
    <td> {{Aircrafts.Status}}   </td>
</tr>

新演示：http://plnkr.co/raF3CTlaErgoVHQhRJA1

Answer 3

这样的事情应该做：

<div ng-controller="showAppCtrl">
  <button ng-click="showDiv = ! showDiv">Toggle</button>
  <h1>{{val}}</h1>
  <div id="upper" ng-show="showDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum fuga voluptatem vero eos itaque nihil dolores quis eveniet repudiandae esse earum assumenda cumque laborum est porro quaerat quia accusamus amet.</div>
</div>

var App = angular.module("App", [])
          .controller('showAppCtrl', function($scope) {
            $scope.val = "Something to be shown";


          });

BIN DEMO

AngularJS - 在ng-click上显示另一个div

3 个答案: