Динамическое изменение содержимого div на ng-click AngularJS

Я хочу отобразить некоторые данные и таблицы в содержимом div, который зависит от того, какую категорию вы выберете при навигации слева. Итак, если я изменю категорию, отображаемое содержимое содержимого div должно измениться.Динамическое изменение содержимого div на ng-click AngularJS

Вот мой код на Plunkr.

Но кажется, что даже этот простой пример не работает.

Так у меня есть два вопроса:

1.) Как я могу исправить этот пример кода для запуска?

Но еще важнее:

2.) Есть ли лучший способ изменить DIV контента при изменении категории?

источник

2016-02-18 JohnDizzle

Я удалил «эти» элементы из кода, а также изменил ng-view на ng-show.

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

Было что-то не так с тем, что вы назвали ваш контент «класс», поэтому я тоже удалил его.

Я уверен, что это не идеальное решение, но теперь оно работает.

link to plnkr

источник

2016-02-18 08:50:43 RVstack

Он работает и благодарит за обмен, но я не могу не думать, что есть справедливый бит кода, просто чтобы сделать что-то действительно простое , Вкладки JQuery делают все это только с этим: '$ (" #tabs ") .tabs();' –

Надеюсь, это поможет вам. Возьмите один массив JSON для категории и данных, а также получить подробную информацию о данных, которые JSon индекс кликали

<!DOCTYPE html> 
<html> 

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 


<body ng-app="myApp" ng-controller="MyController"> 

    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-3"> 
       <ANY ng-repeat="x in category" ng-click="getData($index)"> 
       {{x.category}}<br> 
       </ANY> 
      </div> 

      <div class="col-lg-6"> 
       {{data}} 
      </div> 
     </div> 
    </div> 

<script> 
var app = angular.module('myApp', []); 

app.controller('MyController', function ($scope) 
{  
    $scope.data = ''; 
    $scope.category = [{category:'Apple',data:'Apple Data'},{category:'Banana',data:'Banana Data'},{category:'Orange',data:'Orange Data'}]; 

    $scope.getData = function(index) 
    { 
     $scope.data = $scope.category[index]['data']; 
    } 
}); 

</script> 
</body> 
</html>

источник

2016-02-18 08:18:50

Честно говоря, вам лучше всего использовать $ сост/просмотров. С помощью data-ui-view в div контента и ссылки data-ui-sref на кнопке в вашем меню вы можете легко отключить контент. Взгляните на страницу ui-router, чтобы лучше понять ее. С шаблонами для каждого «представления», на которое ваше меню будет нажимать, ваш код будет не просто намного легче управлять, но, вероятно, более понятным.

источник

2016-02-18 08:48:27 rrd

но можно использовать директиву нг ракурса внутри другой нг ракурса? потому что страница, на которой отображается мой контент, - это просто шаблон, загруженный внутри ng-view. – JohnDizzle

Да, вы можете увидеть это [вложенные состояния/представления] (https: // github.com/angular-ui/ui-router/wiki/Nested-States - & - Nested-Views) link – rrd

Вы можете использовать нг-включить, чтобы показать свое содержание, но вы должны держать их в отдельных файлах contentForApple например, contentForBanana и contentForOrange. Здесь я могу показать вам небольшое изменение в вашем DIV

<div class="content"> 
    <div ng-show="MainCtrl.showApple" ng-include ="'contentForApple.html'"></div> 
    <div ng-show="MainCtrl.showBanana" ng-include = "'contentForBanana.html'"></div> 
    <div ng-show="MainCtrl.showOrange" ng-include = "'contentForOrange.html'"></div> 
    </div>

источник

2016-02-18 10:10:41

Я сделал это с простым ngif

1) Ведите индекс страницы, который должен быть загружен в настоящее время

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.name = 'World'; 
    $scope.pageIndex = 0; 

    /* 
    * Updates current Page index 
    */ 
    $scope.changeIndex= function(indexToChange){ 

     $scope.pageIndex = indexToChange; 

    } 
});

2) Загрузка содержимого на основе выбранного индекса

<body ng-controller="MainCtrl"> 

    <div class="mainframe"> 
     <div class="navigation"> 
      <ul class="list-group"> 
       <li class="list-group-item" ng-click="changeIndex(0)">Home<span class="status-icon"></span></li> 
       <li class="list-group-item" ng-click="changeIndex(1)">Sign Up<span class="status-icon"></span></li> 
       <li class="list-group-item" ng-click="changeIndex(2)">About<span class="status-icon"></span></li> 
      </ul> 
     </div> 


     <div class="content"> 
     <div ng-if="pageIndex == 0" ng-include ="'Home.html'"></div> 
     <div ng-if="pageIndex == 1" ng-include = "'SignUp.html'"></div> 
     <div ng-if="pageIndex == 2" ng-include = "'About.html'"></div> 
     </div> 
    </div>

Конечный результат:
https://embed.plnkr.co/ic0eY2vwiOnChN2ahrEt/

источник

2017-09-19 06:59:20

Динамическое изменение содержимого div на ng-click AngularJS

ответ

Смежные вопросы