I am new to Angularjs. Following is the scenario I am trying to achieve:
Scenario: I need to hide the search bar and the table when am in my "card.html" page which is called by using the function redirectsearchcardURL. Later when I click on 'Home', again the search and table should be shown.
I am using ng-hide to hide the search bar and table but again when i click on home, the search and table is not visible to me.
Below is my code.
home.html file.
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Home<span style="font-size:16px;" class="pull-right hidden-xs showopacity glyphicon glyphicon-home"></span></li>
</ul>
</div>
</div>
</nav>
<center class="main">
<div class="container" ng-controller="card-set-controller" ng-init="getAllSets()">
<form ng-hide ="hideVar" action="#" method="get" style="margin-top:75px; margin-bottom:75px">
<div class="col-md-6 input-group has-feedback">
<input class="form-control" id="system-search" placeholder="Search Flashcard Sets">
<i class="glyphicon glyphicon-search form-control-feedback"></i>
</div>
</form>
<table ng-hide ="hideVar" class="table table-hover table-responsive table-list-search">
<tbody>
<tr class="active" ng-repeat="set in sets">
<td>{{set.Name}}</td>
</tr>
</tbody>
</table>
</div>
</center>
My controller code where I am setting my "hideVar" is:
$scope.redirectSearchCardUrl = function(setIdNum, name) {
var url = "/card/"+setIdNum+ "/"+name;
$scope.hideVar = true;
$location.path(url);
}
Are you ever setting hideVar back to false? You could do
<li class="active">Home</li>
Related
Why doesnt the ng-disabled work in my code?
I have created a plunker.. any suggestions?
https://plnkr.co/edit/j2LnhLxBe5gHPITMqzUJ?p=preview
<ul ng-repeat="permission in permissions" ng-click="permission.assigned=!permission.assigned">
<a class="list-group-item" ng-class="{active: permission.assigned, disable: permission.name=='default'}">
<div class="row">
<div class="col-md-3">
<input type=checkbox aria-label="checkbox" ng-model="permission.assigned" ng-click="$event.stopPropagation()">
</div>
<div class="col-md-4">{{ permission.name }}</div>
<div class="col-md-6">{{ permission.description }}</div>
</div>
</a>
</ul>
Add the following to your input element - ng-disabled="permission.name === 'default'".
I try to implement a tabs nav bar in my app. I use Bootstrap3 and follow this example Boostrap Tabs and Pills.
I have one tab (#home) that is presented every Time. The other tabs i want to generate when i click on addInput() function. I.e tab1, tab2, tab3.
I dont know exactly how to get the combination togther. How can i create a list element with href="#menu1" for the navbar and fitting id="menu1" for the content inside tab.
Here is my example CodePen.io
<div ng-app="myApp" ng-controller="myCtrl">
<form>
<div class="form-group">
<label for="txtDevice" class="control-label">Form Field 1</label>
<input type="text" class="form-control" ng-model="info.name" id="txtDevice">
</div>
<div class="form-group">
<label for="txtIP" class="control-label">Form Field 2</label>
<input type="text" class="form-control" ng-model="info.ip" id="txtIP">
</div>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
</ul>
<div class="form-group tab-content">
<div id="home" class="tab-pane fade in active">
<h4>Home</h4>
<p>content</p>
</div>
<div ng-repeat="site in info.sites track by $index">
<h4>tab {{$index +1}}</h4>
<p>content</p>
</div>
</div>
</form>
<button ng-click="addInput()">+add more inputs</button>
{{info | json}}
<hr>
tags = {{tags | json}}
</div>
There were about four things wrong with your pen, that I have fixed here (http://codepen.io/anon/pen/eBRwev?editors=1010)
Your tabs navigation did not include an ng-repeat for the tab headings
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li ng-repeat="site in info.sites track by $index" class="tab-pane fade in">
<a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a>
</li>
</ul>
You forgot to include jQuery and Bootstrap JS libraries which are required to use the bootstrap tabs.
You have to call the following snippet of JS to activate the bootstrap click handling on the tabs
$('#myTabs a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
You're looking something like this?
id="{{ 'menu' + $index }}"
i have a div implementing infinite-scroll which is placed in a partial HTML page.this div has a implementation within it this ul is implementing ng-repeat for the items got through infinite-scrolln function implemented in a factory.this function is working fine on each scroll.but my is not getting rendered
here is that html
<div ng-controller="studentCareerList">
<div infinite-scroll="list.nextPage(list.index,limit,'engineer')" infinite-scroll-disabled='list.stopscript' >
<ul class="selectMajor relatedCareer " ng-repeat="item in myData" >
<li class="check">
<input type="checkbox" id="check5" class="css-checkbox" /><label class="css-label" for="check5"></label></li>
<li class="icon"><span class="icon30 greenSetting" ></span></li>
<li class="name">
<p>{{item.Name}}</p>
</li>
<li class="description">{{item.Description}}</li>
<li class="remaining">{{item.EarningsAnnual}}</li>
<li class="like"><span class="greyLike"></span></li>
</ul>
<div class="message" style="text-align: center;" ng-show="list.noRecordTrigger">
<span class="infoIcon"></span>
<span>No record found.</span>
</div>
</div>
<div><span ng-show="list.busy">Loading please wait...</span></div>
</div>
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the partial files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div class="corousal-container">
<div class="col-md-12">
<ul id="tabs" class="ops-tabs">
<li class="col-md-4 ops-list active">
<a href="#" class="ops-block">
<span class="header">Charts</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Graphs</span>
</a>
</li>
<li class="col-md-4 ops-list">
<a href="#" class="ops-block">
<span class="header">Reports</span>
</a>
</li>
</ul>
</div>
</div>
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="execView">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-slide-to="0" data-target="#execView" class="active"></li>
<li data-slide-to="1" data-target="#execView" class=""></li>
<li data-slide-to="2" data-target="#execView" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<div class="container" id="pie-chart1">
</div>
</div>
<div class="item">
<div class="container" id="pie-chart2">
</div>
</div>
<div class="item active">
<div class="container" id="pie-chart3">
<div class="carousel-caption">
<canvas class="canvas" id="canvas" style="width: 400px; height: 400px;" width="600" height="600"></canvas>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#execView" class="left carousel-control"><span class="fa fa-angle-left"></span></a>
<a data-slide="next" href="#execView" class="right carousel-control"><span class="fa fa-angle-right"></span></a>
</div>
</div>
If you are using ng-view then you need to create your bootstrap carousel after the html is loaded. You can do this in the onload method.
<div ng-view onload="viewLoaded()"></div>
$scope.viewLoaded=function(){
$('.carousel ').carousel()
}
Use angular Bootstrap directives for this.
http://angular-ui.github.io/bootstrap/
I have some filters based on the Bootstrap 3 dropdown menu, but for some odd reason they do not work in the actual dropdown menu, but if i copy-paste it and place it outside it works fine.
<div ng-app="App" ng-controller="ExerciseCtrl" >
<div class="btn-group" ng-class="{open: open}">
<button type="button" class="btn btn-default dropdown-toggle" ng-click="open=!open">Equipment <span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="equipment in equipments">
<a href ng-click="myFilter = {equipment:'{%verbatim%}{{equipment.name}}{%endverbatim%}'}">{%verbatim%}{{equipment.name}}{%endverbatim%}</a>
</li>
</ul>
</div>
<table class="table table-hover" >
<tr><td><strong>Name</strong></td><td><strong>Main muscle</strong></td><td><strong>Equipment</strong></td></tr>
<tr ng-repeat="exercise in exercises | filter:myFilter | orderBy:orderProp">
{%verbatim%}<td>{{exercise.name}}</td><td>{{exercise.main_muscle.name}}</td><td>{{exercise.equipment.name}}</td>{%endverbatim%}
</tr>
</table>
</div>
One menu item looks like following:
<li ng-repeat="equipment in equipments" class="ng-scope">
Dumbbell
</li>
So basically if i pull out the alink and place it before the table it works, but not inside the actual dropdown menu.
myFilter is being set on a child scope created by ng-repeat, and is not visible to your table. Try using an object property, such as my.filter, instead.
$scope.my = {
filter: ''
}
html:
<li ng-repeat="equipment in equipments">
<a href ng-click="my.filter = equipment.name">...</a>
</li>
...
<tr ng-repeat="exercise in exercises | filter:{ name: my.filter} ...
Here is a demo: http://plnkr.co/edit/ogfe7MxRRIovTG9bQCWN?p=preview