Develop Reference

Angular find via attribute

I have problem with my script.
js
$scope.showConfirm = function(e) {
var confirmPopup = $ionicPopup.confirm({
title: 'some title',
template: 'ccccccc'
});
confirmPopup.then(function(res) {
if(res) {
var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
console.log(a);
}
});
};
and html:
<div class="green" data-id="{{mydiv.mydiv_id}}">
<p>some text </p>
<button class="button button-primary" ng-click="showConfirm({{mydiv.mydiv_id}})">
Wykonane
</button>
</div>
Everything works well, id is allocated and when I check the console that also is all okay, but at this stage need to click the button changed class.For example when I'm click "showConfirm()" I need change class in div where data-id = showConfirm(id).
Now my div have class green, when I' click button this class change to red. In jquery the same script view like this:
$(button).on(click, function(e){
var element = $("div[data-id="+e+"]");
element.removeClass(green);
element.addClass(red)
});
How to do it?
EDIT:
I see that I need to add full code to make it clear :)
updated code:
$scope.showConfirm = function(e) {
var confirmPopup = $ionicPopup.confirm({
title: 'title',
template: 'eeeeee'
});
confirmPopup.then(function(res) {
if(res) {
var a = angular.element(document.querySelectorAll("div['data-id'="+e+"]"));
console.log(a);
$http.get("http://example/rest_api/json?id="+e)
.success(function(data){
// if success set green
})
.error(function(){
// if error set red
})
}
});
};
I need change class when my server is success response.

You should do everything in angular way. angular.element is not the right solution.
You can use ng-class of angular.
Example
<i class="fa" ng-class="{'class-name1': condition1 == 'true', 'class-2': condition2== 'true'}"></i>
if condition 1 is true then class-name1 will be added, if condtion2 is true then class-2 class will be added.
HTML
<div ng-class="{'green': buttonClicked == true, 'red': responseInYes== true}">
$scope.showConfirm = function(e) {
$scope.buttonClicked = true;
$scope.responseInYes= false;
var confirmPopup = $ionicPopup.confirm({
title: 'some title',
template: 'ccccccc'
});
confirmPopup.then(function(res) {
if(res) {
$scope.buttonClicked = false;
$scope.responseInYes= true;
}
});
};
I guess you are looking for something like this.

Consider using ng-class instead of class.
For example
You could also do this using objects, and based on your edit it could be something like:
Updating the HTML
<div data-id="{{mydiv.mydiv_id}}" ng-class="conditions[mydiv.mydiv_id] ? 'green' : 'red'">
And in your controller $scope.conditions = {}; and just set it to true or false in your success and error like : $scope.conditions[e] = true /* or false */;
Note. If you want the default to be green just set the condition to true on init or do the validations and settings assuming the expected to be a negative value.

Try updating a property inside mydiv:
<div class="{{mydiv._class}}">
<p>some text </p>
<button class="button button-primary" ng-click="showConfirm(mydiv)">
Wykonane
</button>
</div>
Then, in your function:
$scope.showConfirm = function(e) {
// your popup window and some more code ...
e._class = 'yellow'; // class for fecthing data (waiting server json result)
$http.get(URL).success(function(data) {
e._class = 'green'; // class for success
}).error(function() {
e._class = 'red'; // class for error
});
};

Use ng-class
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
Check this out.
In your case i suggest to do :
$scope.isGreen = false;
$http.get("http://example/rest_api/json?id="+e)
.success(function(data){
$scope.isGreen = true;
})
.error(function(){
})
In your Html file add this:
ng-class="{'class-green': isGreen, 'class-red': !isGreen}"

Toggle between two functions when button clicked.

I have the following button which i am using as a toggle.
<button ng-click="togglefunction()">Toggle Data</button>
Here is the toggle part which should work
$scope.toggleToolPanel = function () {
// need to put below 2 functions here so that when user clicks 1st time, function 1 executes. when user clicks again, function 2 executes and so on.
};
These are 2 functions which should get executed alternatively inside the toggleFunction
function function1(params) {
return '<span >' + data + '</span>';
}
function function2(params) {
return '<span >' + data *100 + '</span>';
}

Add this to your controller:
$scope.firstFunction = false;
Then change your toggleToolPanel to the following:
$scope.toggleToolPanel = function() {
$scope.firstFunction = !$scope.firstFunction;
if($scope.firstFunction) {
function1(params);
} else {
function2(params);
}
};

Toggle a class on the button element each time it's clicked. See classList.toggle. In your click event handler, use classList.contains to look for the presence of toggle. If there do x, if not do y.

Cleaner code is attached below:
angular.module('mainModule', [])
.controller('MainCtrl', ['$scope', function($scope) {
$scope.toggle = function() {
$scope.isToggled = !$scope.isToggled;
var params = $scope.isToggled;
$scope.isToggled ? toggleIn(params) : toggleOut(params);
};
function toggleIn(params) {
console.log(params);
}
function toggleOut(params) {
console.log(params);
}
}]);
<body ng-app="mainModule">
<div ng-controller="MainCtrl">
<input type="button" value="Toggle" ng-click="toggle()" />
</div>
</body>

data-title not getting updated on button tooltip

I have a button whose tooltip gets updated on enable/disable. But its not.Here is the binding js and html. When I use init then it doesn't but when I use update it does but then clickHandlers gets called multiple times. I am using knockout and bootstrap.
<button class="btn btn-primary" type="button"
id="displaySubmitBtn" data-bind="formSave: {text: isFormComplete() ? '' : missingRequiredTooltip, enable: isFormComplete, click: submitEstimateFromDisplay},
text: bundle.submit_button_label, visible: isSubmitVisible"
data-placement="bottom" data-backdrop="true">
</button>
ko.bindingHandlers.formSave = {
init: function (el, valueAccessor) {
var $el = $(el),
saveEnabled = valueAccessor()['enable'],
text = _.isFunction(valueAccessor()['text']) ? valueAccessor()['text']() : valueAccessor()['text'],
placement = _.isString(valueAccessor()['placement']) ? valueAccessor()['placement'] : 'bottom',
container = _.isString(valueAccessor()['container']) ? valueAccessor()['container'] : 'body',
clickHandler = valueAccessor()['click'];
var enabler = function (enabled) {
// not using $el.prop('disabled') on purpose so BS tooltip will show
if (enabled) {
// enable the button
$el.removeClass('disabled');
$el.attr('data-title', undefined).tooltip('destroy');
}
else {
$el.addClass('disabled');
}
$el.attr('data-title', text);
$el.tooltip({
//title: text,
placement: placement,
container: container
});
};
// call enabler to disable/ enable button and assign tooltip
enabler(saveEnabled());
// enabler listens to the computed method on button getting enabled/diabled
saveEnabled.subscribe(enabler);
$el.on("click", function (evt) {
if (!$el.is('.disabled')) {
$el.attr('data-title', undefined).tooltip('destroy');
if(clickHandler) {
clickHandler(evt);
}
}
else {
evt.preventDefault();
return false;
}
});
}
};

You should be setting the title attribute, not data-title

add class to multiple selector after click Angular

i want to add class to multiple divs after click on button.
here is my code :
$scope.noneStyle = "noneVisible";
$scope.bodyCon = "notRotate";
$scope.addStyle = function () {
if ($scope.noneStyle === "noneVisible" && $scope.bodyCon ==="notRotate") {
$scope.noneStyle = "visibleStyle";
$scope.bodyCon = "rotate";
}
else
$scope.noneStyle = "noneVisible";
$scope.bodyCon = "notrotate";
}
HTML
Click
<aside class="rightbar {{noneStyle}} {{visibleStyle}}"></aside>
<div class="container-fluid {{bodyCon}} {{rotate}}"></div>
here is the Demo:http://jsfiddle.net/sadeghbayan/dbnb2f9x/

You are trying to print scope variables in your markup visibleStyle and rotate that are not defined in the scope.
You are using these names as strings, not javascript variables. Fix this, and everything should work fine.

The reason why your solution isn't working, is because the {{noneStyle}} is immediately parsed as text.
You can use ng-class to achieve this.
I've edited your JsFiddle to achieve this:
http://jsfiddle.net/dbnb2f9x/3/
myApp.controller('mainCtrl', function ($scope) {
$scope.noneStyle = false;
$scope.bodyCon = false;
//Toggle the styles
$scope.toggleStyle = function () {
//If they are true, they will become false
//and false will become true
$scope.bodyCon = !$scope.bodyCon;
$scope.noneStyle = !$scope.noneStyle;
}
});
and in the HTML:
<div ng-app="myApp" ng-controller="mainCtrl">
Click
<aside ng-class="{'noneStyle' : noneStyle}"class="rightbar"></aside>
<div ng-class="{'bodyCon' : bodyCon}" class="container-fluid"></div>
</div>
when the bodyCon $scope variable is true, the class 'bodyCon' will be added to the div because of this rule:
ng-class="{'bodyCon' : bodyCon}"
You can add mutliple statements:
ng-class="{'bodyCon' : bodyCon, 'helloWorldClass' : myVariable == 'helloWorld'}"
In above example the class: "helloWorldClass" will be added when $scope.myVariable equals 'helloWorld'
Hope this helps you with your problem!

KnockoutJS accordion like behaviour with custom binding

I'm trying to build some accordion like functionality with KnockoutJS and custom bindings
So far I've got it half way there:
<div data-bind="foreach: items">
<div class="item"> <span data-bind="text: name() ? name() : 'New Thing'"></span>
<br /> Show / Hide
<div class="fullDetails" data-bind="accordion: visible">
<label>Name:</label>
<input type="text" data-bind="value: name" />
</div>
</div>
</div>
Add new item
and my Javascript
var ViewModel = function () {
var self = this;
self.items = ko.observableArray([new ItemModel()]);
self.addItem = function (item) {
ko.utils.arrayForEach(self.items(), function (i) {
i.visible(false);
});
self.items.push(new ItemModel())
};
self.toggleVisibility = function (item) {
ko.utils.arrayForEach(self.items(), function (i) {
i.visible(false);
});
item.visible(!item.visible())
};
};
var ItemModel = function () {
this.visible = ko.observable(true);
this.name = ko.observable();
}
ko.bindingHandlers.accordion = {
init: function (element, valueAccessor) {
var value = valueAccessor();
$(element).toggle(ko.utils.unwrapObservable(value));
},
update: function (element, valueAccessor) {
var value = valueAccessor();
ko.utils.unwrapObservable(value) ? $(element).slideDown() : $(element).slideUp();
}
};
ko.applyBindings(new ViewModel());
Also on JSFiddle:
http://jsfiddle.net/alexjamesbrown/PPAsK/
Some issues I am having:
Show/Hide link
This seems to scroll up and then immediately scroll down again.
Adding a new item
I was trying to get the item currently visible to slideUp, then the new item to slideDown but this isn't working - whatever item is visible slidesUp, but the new item just appears

Issue 1:
you are always showing on show/hide link click because the item previously gets reset to visible(false). Fix:
ko.utils.arrayForEach(self.items(), function (i) {
//don't bother with the item, we take care of it later
if (item !== i) {
i.visible(false);
}
});
Issue 2:
you need to start with the added item hidden, then apply self.toggleVisibility(newItem)
This will take care of hiding the others and animating the new one
self.addItem = function (item) {
var newItem = new ItemModel();
//make sure it starts hidden
newItem.visible(false);
self.items.push(newItem);
//highlight it the usual way
self.toggleVisibility(newItem);
};
fixed version here:
http://jsfiddle.net/tudorilisoi/3LzbT/8/