采用了棱角分明的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

回答

相关问题