I am trying to set the div width dynamically using ng-style but it is not applying the style. Here is the code:
<div style="width: 100%;" id="container_fform" ng-controller="custController">
<div style="width: 250px;overflow: scroll;">
<div ng-style="myStyle"> </div>
</div>
</div>
Controller:
var MyApp = angular.module('MyApp', []);
var custController = MyApp.controller('custController', function ($scope) {
$scope.myStyle="width:'900px';background:red";
});
What am I missing?
Fiddle link: Fiddle
The syntax of ng-style is not quite that. It accepts a dictionary of keys (attribute names) and values (the value they should take, an empty string unsets them) rather than only a string. I think what you want is this:
<div ng-style="{ 'width' : width, 'background' : bgColor }"></div>
And then in your controller:
$scope.width = '900px';
$scope.bgColor = 'red';
This preserves the separation of template and the controller: the controller holds the semantic values while the template maps them to the correct attribute name.
ngStyle accepts a map:
$scope.myStyle = {
"width" : "900px",
"background" : "red"
};
Fiddle
Related
In VueJS, I have elements that have hover property in my object.
So, I want to put a foreach in style, but it is not possible.
I want to do that kind of thing :
<style>
#foreach (element in elements) {
if (element.has_backgroundhover) {
'#'+element.id:hover {
background : element.background_hover;
}
}
}
</style>
Notice that each element has a background color different (it is stored in his oibject property)
Thank you
The #mouseenter and #mouseleave event listeners would allow for css classes to be applied to each element.
For example, toggle a .hovered class that has the background color defined.
Something like this?
The HTML:
<div id="app">
<div
v-for="element of elements"
#mouseenter="element.hover=true"
#mouseleave="element.hover=false"
:style="{
background: element.hover? element.background_hover : element.background
}"
>{{element.name}}</div>
</div>
And the JS:
new Vue({
el: "#app",
data: {
elements:[
{
name:"element1",
background:"#f8f",
background_hover:"#a4a",
hover:false
},
{
name:"element2",
background:"#ff8",
background_hover:"#aa4",
hover:false
},
]
},
})
This is not using the CSS, rather using events as suggested by #DigitalDrifter. I think the point is that reactive css is not a good idea, and not supported in vue. Instead you need to have the HTML element properties dependent on your vue data object. A fiddle for this is: https://jsfiddle.net/edzaokum/
I have a react component and I'm trying to align the below div using margin-left property. I'm getting a console error:
Unexpected token
pointing towards the hyphen in the margin left property. Can anyone help to resolve this?
<div id="loadingDiv" style = {{display:'block'}}>
<img src={Loading} style = {{width:150,height:150,margin-left:370}} />
</div>
Write it like this:
style = {{ width : 150, height : 150, marginLeft : 370 }}
Instead of using margin-left use marginLeft.
Reason:
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a
string.
margin-left --> marginLeft
padding-top --> paddingTop
background-color --> backgroundColor
Check the DOC.
This can be done like this as well -
const divStyle = {
display:'block'
};
const imgStyle = {
width:150,
height:150,
marginleft:370
};
<div id="loadingDiv" style= {divStyle}>
<img src={Loading} style= {imgStyle} />
</div>
I have a scrollspy directive that adds an ".active" class to a nav item. When the first nav item has the ".active" class I want my header bar to contain a certain class too. Attached is a simplified example, but how can I add ".active" to item 1 by only looking at the classes in item 2. jsfiddle
<div ng-app>
<div ng-controller='ctrl'>
<div id="item1" ng-class="if item2 has class=active then add active class here">Item 1</div>
<div id="item2" ng-class="myVar">Item 2</div>
</div>
//I can't use a scope object I can only look at item 2's classes
<button type="button" ng-click="myVar='active'">Add Class</button>
<button type="button" ng-click="myVar=''">Remove Class</button>
Click here for live demo.
You'll need a directive to interact with the element. I would have the directive watch the element's classes and have it call a function from your controller when the classes change. Then, your controller function can apply the logic specific to your need, which is to set a flag letting another element know how to respond.
angular.module('myApp', [])
.controller('MyCtrl', function($scope) {
$scope.foo = function(classes) {
if (~classes.indexOf('active')) {
$scope.otherItemIsActive = true;
}
};
})
.directive('onClassChange', function() {
return {
scope: {
onClassChange: '='
},
link: function($scope, $element) {
$scope.$watch(function() {
return $element[0].className;
}, function(className) {
$scope.onClassChange(className.split(' '));
});
}
};
})
;
Is it possible to bind a state (attribute) of a paper-checkbox [checked|unchecked] dynamically to an attribute like [readonly|disabled] inside a paper-input element? This is my implementation so far:
<template repeat="{{item in lphasen}}">
<div center horizontal layout>
<paper-checkbox unchecked on-change="{{checkStateChanged}}" id="{{item.index}}"></paper-checkbox>
<div style="margin-left: 24px;" flex>
<h4>{{item.name}}</h4>
</div>
<div class="container"><paper-input disabled floatingLabel id="{{item.index}}" label="LABEL2" value="{{item.percent}}" style="width: 120px;"></paper-input></div>
</div>
</template>
The behavior should be as follow:
When the user uncheck a paper-checkbox, then the paper-input element in the same row should be disabled and/or readonly and vice versa. Is it possible to directly bind multiple elements with double-mustache or do I have to iterate the DOM somehow to manually set the attribute on the paper-input element? If YES, could someone explain how?
Another way to bind the checked state of the paper-checkbox.
<polymer-element name="check-input">
<template>
<style>
#checkbox {
margin-left: 1em;
}
</style>
<div center horizontal layout>
<div><paper-input floatingLabel label="{{xlabel}}" value="{{xvalue}}" disabled="{{!xenable}}" type="number" min="15" max="200"></paper-input></div>
<div><paper-checkbox id="checkbox" label="Enable" checked="{{xenable}}"></paper-checkbox></div>
</div>
</template>
<script>
Polymer('check-input', {
publish:{xenable:true, xvalue:'',xlabel:''}
});
</script>
</polymer-element>
<div>
<check-input xenable="true" xvalue="100" xlabel="Weight.1"></check-input>
<check-input xenable="false" xvalue="185" xlabel="Weight.2"></check-input>
</div>
jsbin demo http://jsbin.com/boxow/
My preferred approach would be to refactor the code to create a Polymer element responsible for one item. That way, all of the item specific behaviour is encapsulated in one place.
Once that is done, there are a couple ways of doing this.
The easiest would be to simply create an on-tap event for the check box that toggles the value of a property and sets the disabled attribute accordingly.
<paper-checkbox unchecked on-tap="{{checkChanged}}"></paper-checkbox>
//Other markup for item name display
<paper-input disabled floatingLabel id="contextRelevantName" style="width:120 px;"></paper-input>
One of the benefits of putting this into it's own polymer element is that you don't have to worry about unique id's anymore. The control id's are obfuscated by the shadowDOM.
For the scripting, you would do something like this:
publish: {
disabled: {
value: true,
reflect: false
}
}
checkChanged: function() {
this.$.disabled= !this.$.disabled;
this.$.contextRelevantName.disabled = this.$.disabled;
}
I haven't tested this, so there might be some tweaks to syntax and what have you, but this should get you most of the way there.
Edit
Based on the example code provided in your comment below, I've modified your code to get it working. The key is to make 1 element that contains an either row, not multiple elements that contain only parts of the whole. so, the code below has been stripped down a little bit to only include the check box and the input it is supposed to disable. You can easily add more to the element for other parts of your item displayed.
<polymer-element name="aw-leistungsphase" layout vertical attributes="label checked defVal contractedVal">
<template>
<div center horizontal layout>
<div>
<paper-checkbox checked on-tap="{{checkChanged}}" id="checkbox" label="{{label}}"></paper-checkbox>
</div>
<div class="container"><paper-input floatingLabel id="contractedInput" label="Enter Value" value="" style="width: 120px;"></paper-input></div>
</div>
</template>
<script>
Polymer('aw-leistungsphase', {
publish: {
/**
* The label for this input. It normally appears as grey text inside
* the text input and disappears once the user enters text.
*
* #attribute label
* #type string
* #default ''
*/
label: '',
defVal : 0,
contractedVal : 0
},
ready: function() {
// Binding the project to the data-fields
this.prj = au.app.prj;
// i18n mappings
this.i18ndefLPHLabel = au.xlate.xlate("hb.defLPHLabel");
this.i18ncontractedLPHLabel = au.xlate.xlate("hb.contractedLPHLabel");
},
observe : {
'contractedVal' : 'changedLPH'
},
changedLPH: function(oldVal, newVal) {
if (oldVal !== newVal) {
//this.prj.hb.honlbl = newVal;
console.log("Geänderter Wert: " + newVal);
}
},
checkChanged: function(e, detail, sender) {
console.log(sender.label + " " + sender.checked);
if (!this.$.checkbox.checked) {
this.$.contractedInput.disabled = 'disabled';
}
else {
this.$.contractedInput.disabled = '';
}
console.log("Input field disabled: " + this.$.contractedInput.disabled);
}
});
</script>
</polymer-element>
In this example I have two additional css classes I want to add to a DIV.
<div data-bind="foreach: [{name: 'Hello', size:'Triple'}]">
<div class="tile"
data-bind="css: {'tile-selected': true, $data.size : true}">
</div>
</div>
The first being 'tile-selected' based on a boolean. This works well.
The second is actually a name of a class 'Triple', (and in this example, always add it, ie 'True')
I get the error:
Uncaught Error: Unable to parse bindings.
Message: SyntaxError: Unexpected token .;
Bindings value: css: {'tile-selected': true, $data.size : true}
I'm assuming that I can't use the $data.size part to pull in the 'Triple' literal from the 'size' property. Is there a way that I can do this? ($data['size'] also didn't seem to work)
You cannot use the ko observables or properties as class names. Instead you would have to create a separate property for this and use the same for dynamic css binding something like below.
<div data-bind="css: sizeCSS"> Profit Information</div>
var viewModel = {
/// some view model properties here.
};
viewModel.sizeCSS = ko.computed(function() {
return this.size();
}, viewModel);
EDIT: Check the dynamic CSS binding example here: http://knockoutjs.com/documentation/css-binding.html