Как я могу визуализировать содержимое html в элементе angularjs?

Я новичок в angularjs. Я сейчас работаю на странице, где я должен отображать различные формы внутри tabs.I've работали над кодом, который активирует вкладку другой на кнопке click.Heres HTML-Как я могу визуализировать содержимое html в элементе angularjs?

<!DOCTYPE html> 
<html ng-app="ui.bootstrap.demo"> 
<head> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script> 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> 
    <script src="example.js"></script> 
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
    <div ng-controller="TabsDemoCtrl"> 
     <uib-tabset vertical="true" type="pills"> 
      <p>Select a tab by setting active binding to true:</p> 
      <p> 
       <button type="button" class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button> 
       <button type="button" class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button> 
      </p> 
      <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active ="tab.active" disable="tab.disabled"> 
       {{tab.content}} 
      </uib-tab> 
     </uib-tabset> 
     <hr /> 
    </div> 
</body> 
</html>

и вот controller.js

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function ($scope, $window) { 
    $scope.tabs = [ 
     { title:'Dynamic Title 1', content:'Dynamic content 1' }, 
     { title:'Dynamic Title 2', content:'Dynamic content 2'} 
    ]; 
});

вот ссылка plunker .. http://plnkr.co/edit/v23qWGzqbw3Y5o51KhHf?p=preview

, что мне нужно, чтобы получить кнопки внутри «динамического контента», то есть, когда мы нажмем кнопку содержания tab1, он активирует вкладку другой. Я также должен включить много других элементов html. Каковы методы, которыми я могу это достичь?

источник

2015-11-06 alex_gabriel

Для вкладок, которые можно использовать нг-шоу директиву,

<li ng-show="myScopeVar == 1">ALl your html here or use a directive</li> 
<li ng-show="myScopeVar == 2">ALl your html here or use a directive</li> 
<li ng-show="myScopeVar == 3">ALl your html here or use a directive</li>

если == $ scope.myScopeVar 2, то только второй литий будет виден, остальные будут невидимы.

источник

2015-11-06 11:21:29

Пожалуйста, взгляните на https://docs.angularjs.org/api/ng/directive/ngInclude.

В «tab.content» у вас должны быть шаблонные URL-адреса и использовать их, как описано в угловых документах.

<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active ="tab.active" disable="tab.disabled"> 
     <div ng-include="tab.content"></div> 
    </uib-tab>

источник

2015-11-06 11:41:13 antonama

Используйте следующий код

<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled"> 
     {{tab.content}} 
     <button type="button" class="btn btn-default btn-sm" ng-click="$parent.tabs[($index+1)%2].active = true">Toggle tab</button> 
    </uib-tab>

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

источник

2015-11-06 11:47:51

Для того, чтобы активная другая вкладку из текущей вкладки: Вы можете попробовать это:

<tabset> 
<tab heading="First" ng-attr-active="firtTab"> 
<button ng-click="gotonext()">Go Next Tab</button> 
</tab> 
<tab heading="Second" ng-attr-active="secondTab">Content2</tab> 
</tabset> 


$scope.firstTab = true; 
$scope.secondTab = false; 

$scope.gotonext= function(){ 
$scope.firstTab = false; 
$scope.secondTab = true; 
}

источник

2015-11-06 13:21:13 Kais

Как я могу визуализировать содержимое html в элементе angularjs?

ответ

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