採用了棱角分明的js

我已經改變上的鏈接的點擊一個div的數據的代碼，則顯示完整的代碼here 採用了棱角分明的js

部分代碼的更改另一個鏈接的點擊一個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>

來源

2016-07-15 sammy001

你Plunker工作就像那只有文本是不同的。那是你想改變的嗎？ – Mary

檢查[塑造與角]（https://www.codeschool.com/courses/shaping-up-with-angular-js），這是一個偉大的互動教程，如何使用角1.x.你應該最感興趣的部分是關於指令的部分。 – Pjetr

@瑪麗，也許他在想，如果該div被點擊，隱藏該元素，而不是點擊顯示內容。 –

試試這個，沒有必要使用更多的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>

來源

2016-07-15 08:18:12

無需使用

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


     }

這裏工作plunker http://plnkr.co/edit/P0JTkRPS3lnxXHQG1Ysw?p=preview

來源

2016-07-15 08:21:55 jitender

檢查OU牛逼這個...

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>

來源

2016-07-15 08:22:55 Sankar

只是不更復雜，它可以更簡化爲這樣：

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>

來源

2016-07-15 08:26:35 Jai

採用了棱角分明的js

回答

相關問題