Search Posts

Category: css

Angularjs ng-style with interpolation expression

Angularjs v1.5.9 : ng-style (ngStyle) There’s a simple div with ng-style command in my directive template, and I use a interpolation expression to get different style at run time: <div class=”large-1 tile tile-plain” ng-style=”{‘background-image’: ‘url(assets/images/km-types/ico-{{iconMap[item.doctype]}}.png)’}”> </div> The directive as follow: .directive(‘knowledgeItemIcon’, function () { return { restrict: ‘E’, templateUrl: ‘templates/item-icon.html’, scope: { item: ‘=’ }, link: function (scope,element,attrs) { scope.iconMap = { ‘howto’: ‘pen’, ‘reference’: ‘settings’, //… }; } }; }); The iconMap is an […]

In AngularJS, how do I go about linking an image to an url?

I am working on an AngularJS application and I would like to have an image which, if clicked, redirects to an URL. I already am able to do that but with text. This is what my code looks like: JS: myLink: { LinkText: “Click here for the pdf:”, LinkHRef: “/documents/pdfs/Final.pdf” } HTML: <div class=”basic-page__link” ng-if=”section.myLink”> <a ng-if=”section.myLink.sectionLinkNewTab !== false” target=”_blank” ng-href=”{{ section.myLink.LinkHref }}”>{{ section.myLink.LinkText }}</a> <a ng-if=”section.myLink.sectionLinkNewTab === false” ng-href=” {{section.myLink.LinkHref }}”> {{section.myLink.LinkText }}</a> </div> […]

Easy way to customize the bullets for my list element in AnguIarJS

I am working on an angularJS webpage. I have a data type for a list. in HTML, it looks like this: <div class=”basic-page__section-list–mylist” ng-if=”section.theList”> <ul class=”section-list section-list–mylist”> <li ng-repeat=”listItem in section.theList”>{{ listItem }}</li> </ul> </div> in JS: app.controller(“myCtrl”, function($scope) { $scope.applySettings({ theList: [ “Alaska”, “Arkansas”, “Florida”, “Texas”, ] },{ This does what it’s supposed to. It prints out a list where Alaska, Arkansas, Florida, Texas are the elements. However, I want to customize what the […]

AngularJS – Reload ng-style background-image

I need to dynamically change the div’s ng-style background? div: <div ng-style=”{‘background-image’: ‘url({{candidate.image}})’}”> {{candidate.name}} </div> controller: angular.module(“MyModule”) .controller(“MyController”, function($scope) { $scope.candidate = { “image” : “myurl.png”, “name” : “My Name” }; $scope.changeCandidate = function() { $scope.candidate = { “image” : “anotherurl.png”, “name” : “Another Name” }; }; }); When a button fires changeCandidate() function, the displayed name changed from My Name to Another Name but the background-image of ng-style remains the same Source: AngularJS

Divs inside panel displaying inline

In my angular app I have a bootstrap ‘panel-body’ class that features the two divs below which each wrap components that are user input fields. For some reason these divs are rendering inline as opposed to on separate lines. Why is this happening and how do I get the divs/components to render on separate lines? note: if I take out the divs and just have the components be there with no div wrapper, I get […]

Making a responsive navbar layout with two logos and centered text

I need to do a responsive navbar with: LOGO1(left side) text(centered) LOGO2(right side) I am trying the next but It doesnt work when when resized to small screens. Here is my problem: when in “lg” size the screen is correct. But when in “md” size or smaller the LOGO2 goes to left side. And, in ‘xs’ size the ‘text’ continues showing with the LOGO2 below it. In my markup code I have some angular staff, […]

google map not displaying in webpage

HTML : <ui-gmap-google-map center=’map.center’ zoom=’map.zoom’ control=”map.control”> <ui-gmap-marker ng-repeat=”marker in markers” coords=”marker.coords” options=”marker.options” events=”marker.events” idkey=”marker.id”> <ui-gmap-window show=”true”> <div class=”popup”> {{marker.content}} </div> </ui-gmap-window> </ui-gmap-marker> </ui-gmap-google-map> JS: Controller part : // Google Maps $scope.map = { center: { latitude: 0, longitude: 0 }, zoom: 1, mapTypeId: google.maps.MapTypeId.ROADMAP, control: {} }; // place a marker $scope.markers = []; function setMarker(lat, long, title, content) { var marker = { id: $scope.markers.length+1, coords: { latitude: lat, longitude: long }, content: content, […]

Setting a dynamically created div between two divs, adjusting the position of all other divs in the process

I have a page, where i create divs dynamically and render the text inside it through AngularJS http get method. the number of divs created equals the number of rows captured by get method. If i get 6 rows of data, there will be 6 divs, placed side by side.Like this: My next step is to click on a div, create a new div just adjacent to it, that will allow me to edit the […]

Next Page »