angularjs - How to uncheck the checkboxes onclick a button - html

I have some checkbox which comes from loop in angularjs. Here I need to uncheck all the checkboxes on click a button.Here I have tried already but its not working,can anyone please help me on it.Here is the code below
HTML
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<ul ng-repeat="(x, y) in items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li ng-repeat="p in y.value"><input type="checkbox" ng-model="vehicle" name="vehicle">{{p}}</li>
</ul>
</li>
</ul>
<button ng-click="myFunct()" type="button">click</button>
</div>
SCRIPT
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http) {
$scope.items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}
$scope.myFunct = function() {
$scope.vehicle="";
}
});

The combination ng-checked with ng-click is the best solution to control checkboxes from controller, you could try this:
<ul ng-repeat="(x, y) in items.filter">
<li class="parent"><b>{{x}}</b></li>
<li class="child">
<ul>
<li ng-repeat="p in y.value">
<input type="checkbox"
ng-checked="v"
name="Item.selected">{{p}}</li>
</ul>
</li>
</ul>
<input type="checkbox" ng-model="v" ng-click="checkAll()" />Clear all
Example: http://next.plnkr.co/edit/a9DInByf8a6yv6wl?preview
Hope it helps!

Assign $scope.vechicle=false
Updated code
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope,$http)
{
$scope.items = {"filter":{"Category1":{"value":["one","two","three"]},"Category2":{"value":["four","five","six"]}}}
$scope.myFunct = function() {
$scope.vehicle=false; //changed to false
}
});

Related

href scroll anchor angularjs

Im having a problem using href/anchor scrolling with angularjs. Once I click the h ref link it always links to the index page sample like this http://xxxxxx/#!/index#sec-menu not sure what I'm doing wrong.
Thanks for the assistance.
HTML
<div class="nav-holder main-menu">
<nav>
<ul>
<li>
Menu
</li>
</ul>
</nav>
</div>
<span class="fw-separator" id="sec-menu"></span>
not sure if this is the cause but I have something like this in my app.js
.otherwise({
redirectTo: '/index'
});
<div class="nav-holder main-menu">
<nav>
<ul>
<li>
<a ng-href="#/?scroll=sec-menu">My element</a>
</li>
</ul>
</nav>
</div>
<span class="fw-separator" id="sec-menu"></span>
change the run code in the module declaration in app.js like so:
app.run(function($location, $rootScope) {
$rootScope.$watch(function() { return $location.search() }, function(search) {
var po= 0;
if (search.hasOwnProperty('scroll')) {
var $target = $('#' + search.scroll);
po= $target.offset().top;
}
$("body,html").animate({scrollTop: po}, "slow");
});
})

To get the tagname of clicked element via ng-click using angularjs

I am facing a problem with ng-click event. Below is my code. When I click on the element, it retrieves the span tag and if I call currentTarget, it gives the li element. I want to get the <a> element on ng-click.And after getting element i have to check whether it has a class named 'havesub', How can I achieve it?
<li>
<a class="havesub" ui-sref="" ng-click="openmenu($event)">
<img src="images/icon-03.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
Below is my function in controller
app.controller("con", function($scope) {
$scope.openmenu = function($event) {
var targets = $event.currentTarget;
};
});
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">
<li>
<a href class="havesub" ng-click="click($event)">
<img src="1.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
</form>
</body>
</html>
event.currentTarget works fine for me
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<form name="userForm">
<li>
<a href class="havesub" ng-click="click($event)">
<img src="1.png" alt="menu" />
<span>Menu item1</span>
</a>
</li>
</form>
<script type="text/javascript">
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.click=function(event){
alert(angular.element(event.currentTarget).hasClass("havesub"));
}
}]);
</script>
</body>
</html>

jQuery accordion doesn't drop like it's supposed to

I am currently building a website which contains a accordion menu.
My problem is the following, when I click the desired item which has to collapse it does collapse but it goes right back to uncollapsed after it collapsed.
$(document).ready(function(){
$(".set > a").on("click", function(){
if($(this).hasClass('active')){
$(this).removeClass("active");
$(this).siblings('.content').slideUp(200);
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
}else{
$(".set > a i").removeClass("fa-minus").addClass("fa-plus");
$(this).find("i").removeClass("fa-plus").addClass("fa-minus");
$(".set > a").removeClass("active");
$(this).addClass("active");
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
}
});
});
Here is the code (jsfiddle)
This code used to work perfectly fine, but for some reason it broke and doesn't work anymore.
I hope someone can help me out.
I think somewhere along the lines you have swapped your accordion to start open (ie removed the styles that initially hide it) so the following lines in your else both opens and closes it:
$('.content').slideUp(200);
$(this).siblings('.content').slideDown(200);
If you are starting with your accordion open, then you need to start with the active class on your link:
$(document).ready(function() {
$(".set > a").on("click", function() {
var link = $(this);
if (link.hasClass('active')) {
link.next('.content').slideUp(200, function() {
link.children('i').removeClass("fa-minus").addClass("fa-plus");
link.removeClass("active");
});
} else {
link.next('.content').slideDown(200, function() {
link.children('i').removeClass("fa-plus").addClass("fa-minus");
link.addClass("active");
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion-container">
<div class="set">
Vloeren <i class="fa fa-plus"></i>
<div class="content">
<ul class="submenu">
<li class="submenu-item">Witte vloer</li>
<ul class="submenu-two">
<li class="submenu-item">Witte vloer</li>
</ul>
<li class="submenu-item">Zwarte vloer</li>
<li class="submenu-item">Grijze vloer</li>
<li class="submenu-item">Paarse vloer</li>
</ul>
</div>
</div>
</div>
I have also cleaned up your jQuery and fixed your else

How to use an object value as the href attribute of an element with AngularJS?

AnglarJS newb here looking for some answers. I have these files,and HTML and a JSON file, what I want to do is use a link stablished as an attribute in the json and use it in a button or link tag.
index.html
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="templateApp" ng-controller="templateCtrl">
<ul>
<li ng-repeat="x in templates">
{{ x.title}}
</li>
<li ng-repeat="x in templates">
{{ x.limagen}}
</li>
<li ng-repeat="x in templates">
{{x.lpagina}}
</li>
<a href ng-click="lpagina">
<script>
lpagina={{x.lpagina}};
</script>
Link</a>
</ul>
<img src="https://placeholdit.imgix.net/~text? txtsize=25&txt=400%C3%97100&w=400&h=100"></img>
</div>
<script>
var app = angular.module('templateApp', []);
app.controller('templateCtrl', function($scope, $http) {
$http.get("obras.json")
.success(function (response) {$scope.templates = response.obra;});
});
</script>
</body>
</html>
And the json file (obras.json)
{
"obra": [
{
"title": "Sample Text",
"limagen": "http://placehold.it/350x150",
"lpagina": "http://stackoverflow.com/questions/25335140/creating- a-button-link-with-json-params"
}
]
}
Thanks for any help you can give me!
Angular allows {{ }} inside of the tags as well. You also don't need to write this as a script since it is just an anchor tag.
<a href ng-click="lpagina">
<script>
lpagina={{x.lpagina}};
</script>
Link</a>
Becomes:
Link
Demo

populating angular div with children's children

Folks- I have a data structure of nested parent-child structure. The first level (parents) drives angular to create a row of buttons. Selecting one of these buttons populates a list with the second level (children). Now I also need that selection to drive a third level (grandchildren). That third div needs to have all the grandchildren of the children.
As I'm relatively new to angular, I'm afraid I'm looking at it too procedurally.
Code follows:
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myChildrenChildren = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function(whatChildren) {
$scope.myChildren = whatChildren;
$scope.myChildrenChildren;
for (x=0;x<$scope.myChildren.length;x++) {
myChildrenChildren = [];
for (y=0;y<$scope.myChildren[x].children.length;y++) {
myChildrenChildren.push($scope.myChildren[x].children[y]);
}
//console.log(myChildrenChildren);
};
console.log(myChildrenChildren.length);
};
$scope.showL3Content = function(whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>
This article talks about using recursion in directives: http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/
which sounds like it will solve your problem.
this works, but I'm feeling like I should either preprocess the JSON differently, or there might be a more 'angular' way of doing this.
<html ng-app="KPI_Scorecard">
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!--script src="https://ribbit.fmr.com/resources/statics/379584/angular.min.js"></script-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!--script src="js/controllers.js"></script-->
<script>
var $j = jQuery.noConflict();
var KPI_Scorecard = angular.module('KPI_Scorecard', []);
var listL2;
var myChildren;
var myL3s = []
KPI_Scorecard.controller('KPIListCtrl', function ($scope) {
$scope.showL2Content = function (whatChildren) {
var myL3s = []
$scope.myChildren = whatChildren;
for (x = 0; x < whatChildren.length; x++) {
for (y = 0; y < whatChildren[x].children.length; y++) {
myL3s.push(whatChildren[x].children[y]);
}
};
$scope.myChildrenChildren= myL3s;
console.log(myL3s);
};
//console.log(myChildrenChildren);
$scope.showL3Content = function (whatChildren) {
//console.log(whatChildren);
};
$scope.myList = [{"id":"Jack","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Margin","goalWeight":"0.5","goalColor":"11.7"},{"goalName":"Expense","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Chuck","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Expense","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"David","employeeLevel":"3","managerName":"Chuck","l1Mgr":"Jack","l2Mgr":"Chuck","goals":[{"goalName":"budget","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Scott","employeeLevel":"3","managerName":"Chuck","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Investment","goalWeight":"0.4","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Jill","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}]},{"id":"Rick","employeeLevel":"4","managerName":"Scott","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"technology","goalWeight":"1","goalColor":"NULL"},{"goalName":"Data","goalWeight":"0.5","goalColor":"NULL"}],"children":[]}]}]},{"id":"Js","employeeLevel":"2","managerName":"Jack","l1Mgr":"Jack","l2Mgr":"none","goals":[{"goalName":"Cross","goalWeight":"0.2","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[{"id":"Alison","employeeLevel":"3","managerName":"Js","l1Mgr":"Jack","l2Mgr":"Js","goals":[{"goalName":"Research","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.25","goalColor":"NULL"}],"children":[]},{"id":"Peter","employeeLevel":"3","managerName":"Js","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Invest","goalWeight":"0.5","goalColor":"NULL"},{"goalName":"Support","goalWeight":"0.33","goalColor":"NULL"}],"children":[]}]}]},{"id":"Jim","employeeLevel":"1","managerName":"John","l1Mgr":"none","l2Mgr":"none","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Anne","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[{"id":"Marisa","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Spending","goalWeight":"1","goalColor":"NULL"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]},{"id":"Linda","employeeLevel":"3","managerName":"Anne","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Retention","goalWeight":"1","goalColor":"97"}],"children":[]}]},{"id":"Gene","employeeLevel":"2","managerName":"Jim","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"Actual","goalWeight":"0.34","goalColor":"1.49"},{"goalName":"Total","goalWeight":"0.33","goalColor":"92.96"}],"children":[{"id":"Kathleen","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"% Clients","goalWeight":"1","goalColor":"NULL"},{"goalName":"Employee","goalWeight":"1","goalColor":"90"}],"children":[]},{"id":"Chris","employeeLevel":"3","managerName":"Gene","l1Mgr":"","l2Mgr":"","goals":[{"goalName":"processes","goalWeight":"1","goalColor":"NULL"},{"goalName":"Planning","goalWeight":"1","goalColor":"NULL"}],"children":[]}]}]}];
})
</script>
</head>
<body ng-controller="KPIListCtrl">
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>SCORECARDS</h1>
HOME
</div>
<div data-role="content" style="height:400px">
<ul data-role="listview" id="list-L2" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L2 Scorecards
<li ng-repeat="aName in myChildren">
{{aName.id}}
</li>
</ul>
<ul data-role="listview" id="list-L3" data-divider-theme="b" data-inset="true" style="width: 20%; display: inline-block;" ng-click="$event.preventDefault()">L3 Scorecards
<li ng-repeat="aName2 in myChildrenChildren">
{{aName2.id}}
</li>
</ul>
</div>
<div data-role="footer" id="list-L1" ng-click="$event.preventDefault()">
</form> <span ng-repeat="aName in myList" style="float:left">
{{user.name}}<br>
<button ng-click="showL2Content(aName.children)">{{aName.id}}</button>
</span></div>
</div>
</body>
</html>