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>
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 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>
<body ng-app="" ng-init="names=['james', 'sean', 'emmanuel']">
<div class="container">
<h2>Angular ng-repeat demo</h2>
<ul class="list-inline" ng-repeat="name in names">
<li> {{ name }} </li>
</ul>
</div>
I'm new to angular and bootstrap. The code above does not place the names on a single line. Any suggestion?
ps: list-line is a bootstrap css class
Use ng-repeat on the li element not the ul:
<div class="container">
<h2>Angular ng-repeat demo</h2>
<ul class="list-inline">
<li ng-repeat="name in names"> {{ name }} </li>
</ul>
</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/
<li ng-repeat="Item in Items">
<div ng-switch="($index)==0">
<div ng-switch-when="true">
< Previous
</div>
<div ng-switch-when="false">
{{$index}}
</div>
</div>
</li>
I want to get element count of the Items and want to show "Next >" for last item
Something like this
<li ng-repeat="Item in Items">
<a ng-if="$first" href="#">< Previous</a>
<a ng-if="!$first && !$last" href="#">{{$index}}</a>
<a ng-if="$last" href="#">Next ></a>
</li>
To get the length use Items.length. It becomes more complex if there is a filter. See this SO post