嗨,我想知道如何在(AngularJS)中使用两个参数的ng-click

时间:2014-11-10 20:04:37

标签: angularjs angularjs-ng-click

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
    <div class="navbar-header">
        <span class="navbar-brand">Suivi Des Tables</span>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
            <li class="{{item.class}}" ng-repeat="item in menu" ng-class="{active : item == itemcourant}"><a ng-click="selectItem(item);tab={{item.tab}}" href="#{{item.nom}}">{{item.nom}}</a></li>
            <li><a ng-click="tab=1" href="#">test</a></li>
        </div>
    </div>
</div>

问题是:ng-click =&#34; selectItem(item); tab = {{item.tab}}&#34;

1 个答案:

答案 0 :(得分:0)

请参阅下面的演示

您应该将item传递给控制器​​并在控制器内部创建所有逻辑

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {

  $scope.menu = [{
    tab: "One",
    nom: "Link A"
  }, {
    tab: "Two",
    nom: "Link B"
  }];

  $scope.selectItem = function(item) {

    $scope.tab = item.tab;


  };

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
  <div ng-controller="firstCtrl">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <h2>Tab: {{tab}}</h2>
        <div class="navbar-header">
          <span class="navbar-brand">Suivi Des Tables</span>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="{{item.class}}" ng-repeat="item in menu" ng-class="{active : item == itemcourant}"><a ng-click="selectItem(item)" href="#{{item.nom}}">{{item.nom}}</a>
            </li>
            <li><a ng-click="tab=1" href="#">test</a>
            </li>
          </ul>

        </div>

      </div>
    </nav>
  </div>
</body>