Question

我有一个代码可以在点击链接时更改div的数据，显示完整的代码here

部分代码

<div class="list-group-item" ng-click="changeView('apple')">Apple content<span class="status-icon"></span></div>
<div class="list-group-item" ng-click="changeView('banana')">Banana content<span class="status-icon"></span></div>
<div class="list-group-item" ng-click="changeView('orange')">Orange Content<span class="status-icon"></span></div>


<div>
    <div ng-show="showApple">{{content}}</div>
    <div ng-show="showBanana">{{content}}</div>
    <div ng-show="showOrange">{{content}}</div>
</div>

我想要的是当我点击苹果时，div会加载具有预定义内容的内容 e.g

当点击苹果时，这个div应该加载

<div> This is apple </div>

单击banana时，此div应加载

<div> This is banana</div>

单击橙色时，此div应加载

<div> This is orange</div>

Answer 1

试试这个，不需要使用更多的div内容来显示输出

var app = angular.module('myapp', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.content = "";

  $scope.changeView = function(val) {
    $scope.content = val;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<body ng-app="myapp" ng-controller="MainCtrl">
  <div class="list-group-item" ng-click="changeView('apple')">Apple content<span class="status-icon"></span>
  </div>
  <div class="list-group-item" ng-click="changeView('banana')">Banana content<span class="status-icon"></span>
  </div>
  <div class="list-group-item" ng-click="changeView('orange')">Orange Content<span class="status-icon"></span>
  </div>

  <div>
    <div ng-show="content">This is {{content}}</div>

  </div>
</body>

Answer 2

无需使用

 <div>
<div ng-show="showApple">{{content}}</div>
<div ng-show="showBanana">{{content}}</div>
<div ng-show="showOrange">{{content}}</div>
</div>

按照以下方式执行

  <div>{{myContent}}<div>

并在代码中

$scope.changeView = function(val){
         switch(val){
           case 'apple' :
         $scope.myContent = 'apple content';
         break;
           case 'bnana' :
         $scope.myContent = 'bana content';
       break;
         }


      }

这是工作人员http://plnkr.co/edit/P0JTkRPS3lnxXHQG1Ysw?p=preview

Answer 3

看看这个......

＆＃13;

var app = angular.module('app',[]);

app.controller('mainCtrl',function($scope){
    $scope.changeView=function(frt){
        if (frt==='apple'){
            $scope.fruit=1;
            $scope.content='This is apple';
          }
        else if (frt==='banana'){
            $scope.fruit=2;
            $scope.content='This is banana';
          }
        else if (frt==='orange'){
            $scope.fruit=3;
            $scope.content='This is orange';
          }
      }
  });

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app="app" ng-controller="mainCtrl">
<div class="list-group-item" ng-click="changeView('apple')">Apple content<span class="status-icon"></span></div>
<div class="list-group-item" ng-click="changeView('banana')">Banana content<span class="status-icon"></span></div>
<div class="list-group-item" ng-click="changeView('orange')">Orange Content<span class="status-icon"></span></div>


<div>
    <div ng-show="fruit==1">{{content}}</div>
    <div ng-show="fruit==2">{{content}}</div>
    <div ng-show="fruit==3">{{content}}</div>
</div>
  </div>

＆＃13;

Answer 4

只是不要复杂化，可以简化为：

var app = angular.module('demoApp', []);

app.controller('demoCtrl', ['$scope', function($scope) {
    $scope.fruits = {};
    $scope.fruits.apple = 'Apples are Reds and Greens.';
    $scope.fruits.banana = 'Bananas are Yellows, Greens and Long.';
    $scope.fruits.orange = 'Oranges are Orange and Round.';
    $scope.changeView = function(fruit) {
      $scope.fruits.content = $scope.fruits[fruit];
    }
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app='demoApp' ng-controller='demoCtrl'>
  <div class="list-group-item" ng-click="changeView('apple')">Apple content<span class="status-icon"></span>
  </div>
  <div class="list-group-item" ng-click="changeView('banana')">Banana content<span class="status-icon"></span>
  </div>
  <div class="list-group-item" ng-click="changeView('orange')">Orange Content<span class="status-icon"></span>
  </div>


  <div>
    <div>{{fruits.content}}</div>
  </div>
</div>

使用角度js在单击另一个链接时更改div的内容

4 个答案: