<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>
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 have the following code, I want to add 1 to the current index of the second Name, because if I don't, it will output the same name in a single line. How do I add to the current index of ngRepeat?
<ul id="speakerlist" ng-repeat="data in result">
<li>
<div class="col">
<h3>{{data.Name}}</h3>
</div >
<div class="col">
<h3>{{data.Name | $index+1}}</h3>
</div>
</li>
</ul>
I solved this by using jQuery, but I want to do it in angularjs way.
EDIT: additional info
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"Michael Jordan"},{"Name":"Kobe Bryant"},{"Name":"Kevin Durant"},{"Name":"Stephen Curry"} ];
});
The result I want Is:
Michael Jordan Kobe Bryant
Kevin Durant Stephen Curry
If I understand correctly, you want to display a li for every two items. You can do it something like this:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col">
<h3>{{result[$index].Name}}</h3>
</div >
<div class="col">
<h3>{{result[$index + 1].Name}}</h3>
</div>
</li>
</ul>
Of course you would also have to include some kind of check if the $index can reach the last one (if the collection has an un-even amount of items)
See this jsfiddle
You could even remove the double col html if you don't like duplicate html code:
<ul id="speakerlist" ng-repeat="data in result">
<li ng-if="$even">
<div class="col"
ng-repeat="item in [result[$index], result[$index + 1]]">
<h3>{{item.Name}}</h3>
</div >
</li>
</ul>
Try this code <h3>{{data.Name }} {{$index+1}}</h3> instead of your code
<h3>{{data.Name | $index+1}}</h3>
The result format looks like
Ramesh
Ramesh1
Rajendran
Rajendran1
I think you can make it simple this way.
var app=angular.module("myApp",[])
app.controller("myController",function($scope){
$scope.result=[{"Name":"hari"},{"Name":"ram"} ];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myController">
<ul id="speakerlist" ng-repeat="data in result track by $index">
<li>
<div class="col">
<h3 >{{data.Name}} {{data.Name+1 }}</h3>
</div >
</li>
</ul>
</body>
">
Why don't you do this ?
<ul id="speakerlist" >
<li ng-repeat="data in result">
<div class="col">
<h3>{{data.Name}}</h3>
</div >
</li>
</ul>
This way you don't need to change de $index, it will be automatic
I am trying to implement a Kendo Tab Strip and that applies ui-router to display the contents of the tab. I can get the tab strip to display but not the contents using the ui-view. Anyone have an example of how to make these items work together.
Sample of my html.
<div class="main-template">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<div ng-controller="Navigation">
<div kendo-tab-strip k-content-urls="[ null, null]">
<!-- tab list -->
<ul>
<li class="k-state-active" url="#/invoice">Invoice Management</li>
<li url="#/shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
I was not merging everything together as I should. In the li markup I should have used ui-sref instead of url.
<div class="main-template" style="margin-left: 10px;">
<div class="row">
<h3>Welcome to the Dashboard</h3>
<!--<a ui-sref="invoice">Invoice</a>
<div ui-view></div>-->
<div ng-controller="Navigation">
<div kendo-tab-strip="tabs">
<!-- tab list -->
<ul>
<li class="k-state-active" ui-sref="invoice">Invoice Management</li>
<li ui-sref="shipment">Shipment Management</li>
</ul>
</div>
<div ui-view></div>
</div>
</div>
</div>
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/