Question

这是我的HTML：我正在尝试用角度js中的菜单显示菜单和内容，并使用一个名为contests的对象。

<!DOCTYPE html>
<html ng-app="app">
<head>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" />

  <title>Title Town!</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
</head>
<body>
<div ng-controller="ContestController as contest">

    <h2>{{contest.greeting}}</h2>

    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select a team!
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li ng-repeat="contest in contest.contest" ng-class="{{contest.active}}"><a href ng-click="tab = tab=={{contest.id}} ? a : {{contest.id}}">{{contest.name}}</a></li>
        </ul>
      </div>
      <p ng-repeat="contest in contest.contest" ng-show="{{contest.show}}">{{contest.name}} Contest!  </p>           
    </div>

   <br/><br/><br/><br/><br/><p>There should be content displayed above me when a team is clicked. </p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>

这是我的Javascript。你会看到我创建了一个名为contest的控制器。我创建了一个对象并将其分配给＆＃34; this.contest = contests＆＃34;。当我检查我的代码时，所有内容都正确加载但是有错误并且没有太多的描述..当然，当我点击团队名称时，应该显示的段落不是展示。

语法错误：Token＆＃39; contest.id＆＃39;位于表达式[{3}]的第{2}列，从[{4}]开始。

// Code goes here

//main Controller
(function() {
  var app = angular.module('app', []);

  app.controller('ContestController', function($scope) {
    this.greeting = 'Welcome my app!';
    this.contest = contests;

    $scope.tab = '1';

   /* $scope.toggle() = function(id){

        $scope.visible = !$scope.visible;
        console.log('Test' + id);

    };*/

  });

  var contests = [{
        name: 'Seahawks',
        active: '{active:tab === 1}',
        show: 'tab === 1',
        id: '1'
    },{
        name: 'Colts',
        active: '{active:tab===2}',
        show: 'tab === 2',
        id: '2'
    },{
        name: 'Badgers',
        active: '{active:tab===3}',
        show: 'tab === 3',
        id: '3'
    },{
        name: 'Rams',
        active: '{active:tab===4}',
        show: 'tab === 4',
        id: '4'
    }];

})();

我的plunker

Answer 1

正如我评论的那样，我已经为您重写了代码：http://plnkr.co/edit/MlOzNqqcrIh7xImysIbU?p=preview

<强>控制器：

(function () {

        angular
            .module('app', [])
            .controller('ContestController', [ContestController]);

    function ContestController() {
        var self = this;

        self.data = {
            greeting: 'Welcome my app!',
            contests: [
                {
                    name: 'Seahawks',
                    id: 1
                }, {
                    name: 'Colts',
                    id: 2
                }, {
                    name: 'Badgers',
                    id: 3
                }, {
                    name: 'Rams',
                    id: 4
                }
            ],
            currentTab: 0
        };

        self.data.selectTab = function (tab) {
            self.data.currentTab = tab;
        }
    }
})();

<强> HTML ：

<div>
    <div ng-controller="ContestController as contest">

        <h2>{{contest.data.greeting}}</h2>

        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select a team!
                <span class="caret"></span></button>
            <ul class="dropdown-menu">
                <li ng-repeat="c in contest.data.contests">
                    <a href ng-click="contest.data.selectTab(c.id)">{{c.name}}</a>
                </li>
            </ul>
            <p ng-show="contest.data.currentTab > 0">{{contest.data.contests[contest.data.currentTab - 1].name}} Contest!</p>
        </div>

        <p>There should be content displayed above me when a team is clicked. </p>
    </div>
</div>

有几点需要注意：

1）你应该努力投入一个＆＃39;。在所有控制器属性和它们的数据之间（例如使用对象属性而不是仅设置原语。这就是为什么在我的重写中我将所有内容都分配给数据对象属性。

2）你使用的是他们不属于的绑定表达式。例如，在ng-click和ng-show中。 Angular感到困惑。

3）你也试图在你的控制器中使用＆＃39; active＆＃39;我不相信的财产会以你想象的方式翻译。

4）最好将css链接放在文档的头部，并将javascript标记放在body标记之前。你还有两个链接指向bootstrap的css。

如果您对我的示例有任何疑问，请随时发表评论！

Angular JS使用ng-click和ng-show下拉显示动态内容？

1 个答案: