Search Posts

Category: twitter-bootstrap

Passing user input into $http.get request angularJS

I am currently trying to pass user input into my $http.get request. I am using bootstrap and angular but am confused as I have am trying to pass two dates through a bootstrap modal. I currently have a controller like this app.controller(‘testCtrl’, function($scope, $http){ $http.get(“website” + box1 + box2).then(function(r){ $scope.Data = r.data; }); }); And a modal in bootstrap with <div class=”modal-header”> <h4 class=”modal-title”>test</h4> </div> <div class=”modal-body”> <input id=”box1″ type=”text”/> <input id=”box2″ type=”text”/> </div> <div […]

how to use twitter bootstrap javascript component in angularjs

I want to use tootltip of twitter bootstrap in my angularjs web app. when I use them simply in my code and put the jQuery initialization on top of my js file inside document.ready it works perfectly. $( document ).ready(function(){ $(function () { $(‘[data-toggle=”tooltip”]’).tooltip() }); $(‘.myslider’).myslider(); }); var myapp = angular.module(“eplApp”,[‘ui.router’]); but when I use them in view by ui-routing. It stops working with no error in console.. i am also using more javascript components […]

close bootstrap accordion timing

I am trying to close bootstrap accordion on click using angularJS, I want my close in 5 second how to do it, Here is my code: <!DOCTYPE html> <html> <head> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script> </head> <body> <div class=”container”> <h2>Collapsible Panel</h2> <p>Click on the collapsible panel to open and close it.</p> <div class=”panel-group”> <div class=”panel panel-default”> <div class=”panel-heading”> <h4 class=”panel-title”> <a data-toggle=”collapse” href=”#collapse1″>Collapsible panel</a> </h4> </div> <div id=”collapse1″ class=”panel-collapse […]

<ol> are not as expected when the data is exported

I have used the below css code to show the ordered list in my web page. I have exported the content to the PDF, then the ordered lists in the PDF are showing different as shown in the image link below. ol { counter-reset: item; } ol li { display: block } ol li:before { content: counter(item) “. “; counter-increment: item; font-weight: bold; } Please click here to view the image of the exported ordered […]

dynamically add class attribute and &bull for <li> items when exporting

One of the hack seems to working from below mentioned github URL, exporting bullets to PDF. But issue when used the above approach is two bullets are being shown for the same option on the webpage, but when exported to the PDf it displayed single bullet as expected. If u see the below mentioned github link,there is a hack given by Kevinlearynet which is working fine when exported the <li> items to the PDF. Workaround […]

Angular Material layout add row after every 4th column

Is it possible to add a new row after every fourth column using Angular Material Layout/ Flex ? We have to show these fixed width albums and show only 4 albums on a row. This was the code we used using bootstrap <div ng-repeat=”item in items ng-if=”$index % 4 == 0″ class=”row”> <div class=”col-xs-4″>{{ items[$index].id }} </div> <div class=”col-xs-4″>{{ items[$index + 1].id }}</div> <div class=”col-xs-4″>{{ items[$index + 2].id }}</div> <div class=”col-xs-4″>{{ items[$index + 3].id }}</div> […]

bootstrap class=filestyle in ng-repeat angularjs 1.x

I have a form where in i have below code, where i need a file upload control for every object in ng-repeat along with drop down and label. Its rendering fine. For my file upload control, i am using bootstrap “filestyle” class to make it beautiful but the problem is that Filestyle class is not getting applied in ng-repeat. I know that we have limitation that ng-repeat does not apply css class on its elements […]

Show AngularJS Dropdown Multiselect checkeds

I was made a simple dropdownList using AngularJS Dropdown Multiselect and II’d like to show in page the names Ids checkeds but it is showing only the IDs. How can I do It ? Below or in my GitHub code: GitHub: all code here to download Html page: index.html Angular app: “MyApp.js” DropDown directive: AngularJS Dropdown Multiselect Html page: index.html Angular app: “MyApp.js” Source: AngularJS

Next Page »