使用angular js在單擊另一個鏈接時更改div的內容

Question

我有一個代碼，可在單擊鏈接時更改div的數據，此處顯示完整的代碼

部分代碼

<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具有預定義的內容，例如

單擊蘋果時，該div應該被加載

<div> This is apple </div>

單擊香蕉時，該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

看看這個...

 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'; } } });

 <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>

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>

使用angular js在單擊另一個鏈接時更改div的內容

問題描述

4 個解決方案

解決方案1
0 2016-07-15 08:18:12

解決方案2
0 2016-07-15 08:21:55

解決方案3
0 2016-07-15 08:22:55

解決方案4
0 2016-07-15 08:26:35

使用angular js在單擊另一個鏈接時更改div的內容

問題描述

4 個解決方案

解決方案1 0 2016-07-15 08:18:12

解決方案2 0 2016-07-15 08:21:55

解決方案3 0 2016-07-15 08:22:55

解決方案4 0 2016-07-15 08:26:35

解決方案1
0 2016-07-15 08:18:12

解決方案2
0 2016-07-15 08:21:55

解決方案3
0 2016-07-15 08:22:55

解決方案4
0 2016-07-15 08:26:35