Search Posts

Category: twitter-bootstrap-3

need to get value of the tab in angularjs

I have list of array passing to a tab. when i select the tab the value of “s” should reflect in controller which i am not able to find the solution. <div class=”widget-body padding-10″> <ul id=”Tabs” class=”nav nav-tabs bordered”> <li ng-repeat=”s in services track by $index”> <a id=”s{{$index}}tab” href=”#s{{$index}}” data-toggle=”tab”> <i class=”fa fa-fw fa-lg fa-file” ></i> {{s}} </a> </li> </ul> <div id=”TabsContent” class=”tab-content padding-10″> <div class=”tab-pane active” id=”s{{$index}}” ng-repeat=”s in services track by $index”> <div […]

How to import correctly Bootstrap 4 in an Angularjs App that uses Bootstrap 3

I am trying to migrate my App, which uses AngularJS 1.6.x and currenlty Bootstrap 3. I installed bootstrap 4, along with Popper.js and JQuery, and made a lot of the re-writing of classes for Bootstrap 3 to 4. The thing is, the Grid doesn’t seem to be imported anywhere, elements are all over the place. I mean my App needs more work to look as in Bootstrap 3, but it shouldn’t be that broken. What […]

Setting default values in a modal dialog

I would like to set a default value in a form control as soon as the modal dialog opens, unfortunately it doesn’t seem to be that easy. At the moment I don’t know why it doesn’t set any values. HTML <!– Modal – Create –> <div class=”modal fade” id=”add_new_task_modal” tabindex=”-1″ role=”dialog” aria-labelledby=”myModalLabel”> <div class=”modal-dialog” role=”document”> <div class=”modal-content”> <div class=”modal-header”> <button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”><span aria-hidden=”true”>&times;</span></button> <h4 class=”modal-title” id=”myModalLabel”>Add item</h4> </div> <div class=”modal-body”> <ul class=”alert alert-danger” […]

AngularJs & Bootstrap3: Form validation & required field

Using angularjs 1.3 and Bootstrap 3 here. I am trying to validate my form for required field. I added html5 “required” attribute. I also added ng-class to highlight the error but the issue is when the form loads my input field ie texbox is already highlighted. What I am looking for is to hightlight the texbox on button click. Do I have to manually check for this and show error? I use the below code: […]

Issues with Bootstrap table with collapsible rows

I created a Bootstrap table and would like to have collapsible rows to show some additional information, but can’t seem to get it to work. My code looks like this: <div ng-if=”!c.data.loading && c.list.length>0″ class=”list-group” style=”max-height: none; overflow-y: auto;”> <table class=”table table-striped table-hover”> <thead> <tr> <th></th> <th>Work Type</th> <th>Work Name</th> <th>From</th> <th>To</th> <th></th> </tr> </thead> <tbody> <tr ng-repeat=”item in c.list track by $index” ng-if=”$index >= data.window_start && $index < data.window_end”> <td style=”vertical-align: middle;”> <div href=”#{{item.sys_id}}” […]

Display buttons In the certain format using ng-repeat

I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below, sample = [ { “id”: 12, “title”: “title2”, “description”: “description2_for the second” }, { “id”: 13, “title”: “title3”, “description”: “description3” }, { “id”: 17, “title”: “title4”, “description”: “description4” }, { “id”: 18, “title”: “title5”, “description”: “description5” }, { “id”: 19, “title”: “title6”, “description”: “description6” }, { “id”: 20, “title”: “title7”, “description”: […]

Display Array of array objects into 3 buttons using ng-repeat

I am using angularjs and bootstrap3. I have array of array of objects and I need to display it in the UI like below, my code ng-repeat look like, <div class=”editor-preview-testimonials”> <div class=”row” > <div class=”col-md-4 icon-modal-pop” ng-repeat-start=”i in sample track by $index”> <div class=”tooltip”><button type=”button” class=”btn btn-primary btn-round-lg btn-lg”>{{i.title}}</button><span ng-model=”i.title”></span> <span class=”tooltiptext”>{{i.description}}</span> </div> </div> <div class=”clearfix” ng-if=”($index+1)%3==0″></div> <div ng-repeat-end=””></div> </div> </div> Now it’s looking like, If third array object is available, then the first […]

changing bootstrap progress bar color based on percentage

I created a progress bar using Bootstrap and want the color to change dynamically based on percentage. So far this is what my code looks like: <div class=”progress” style=”height: {{c.options.bar_height}}px;”> <div class=”progress-bar progress-bar-striped active {{c.progress_bar_color}}” role=”progressbar” aria-valuenow={{c.data.percent_complete}} aria-valuemin=”0″ aria-valuemax=”100″ style=”width:{{c.data.percent_complete}}; font-size: {{c.options.font_size}};”> {{c.data.percent_complete}} </div> </div> In my client controller, I have set the colors as such: if(c.data.percent_complete<=50) { c.progress_bar_color = ‘progress-bar-danger’; } if(c.data.percent_complete>50 && c.data.percent_complete<=75) { c.progress_bar_color = ‘progress-bar-warning’; } if(c.data.percent_complete>75 && c.data.percent_complete<=99.99) { c.progress_bar_color […]

Next Page »