I am using UI Carousel, but facing difficulty in accessing parent scope inside it.
Below is the demo code for the same.
<div class="col-md-9 col-lg-9 col-sm-12 col-xs-12" id="menuCard">
<div class="food-item-section" ng-repeat="type in foodTypes">
<p class="food-section-header">
{{type.toUpperCase()}}
</p>
<ui-carousel
slides="slideMenu[type.toUpperCase()]"
slides-to-show="3"
slides-to-scroll="1"
initial-slide="1"
autoplay="false",
dots = "true"
>
<carousel-item>
<div class="item-box">
<img src="../images/FoodItems/{{item.itemName}}.jpg" class="img img-thumbnail img-responsive" />
<h4 class="text-center">{{item.itemName}}</h4>
<h3 class="text-center">₹ {{item.itemPrice }}</h3>
<div class="text-center">
<div class="col-md-5 col-sm-12 col-xs-12 col-lg-5">
<button class="btn btn-sm btn-menu btn-success" ng-click="increaseQuantity(item)">+</button>
The issue is the function increaseQuantity is not being called. It is defined in controller like this :
$scope.increaseQuantity = function(item) {
console.log(item);
};
Need help on this.
Taking a look here you can try the following in your items array:
items.map((item) {
item.callback = () => {
console.log(item);
}
return item;
});
And then:
ng-click="item.callback()"
Related
I have function in my controller where I retrieve all my data from database (id,name,surname,emai,review):
function loadAll() {
UniversalService.GetAll()
.then(function (a) {
$scope.all=a;
});
}
then I print it like this in html:
<div class="row comment-table" ng-repeat="item in all ">
<div class="col-md-1">
<img ng-src="http://www.gravatar.com/avatar/{{hash[$index]}}" alt="Description" />
</div>
<div class="col-md-9">
<p>Review posted by: {{item.name}}</p>
<p>{{item.review}}</p>
<span uib-rating ng-model="rate" max=5 on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>
</div>
</div>
Now, I added edit and delete buttons for each review. But I am not sure how to actually edit specific review beause I need to have these values inside inputs and how to delete them. Is it possible when I printed my values with loadAll() ?
By using the $index.
In you html:
<div class="row comment-table" ng-repeat="item in all ">
<div class="col-md-1">
<img ng-src="http://www.gravatar.com/avatar/{{hash[$index]}}" alt="Description" />
</div>
<div class="col-md-9">
<p>Review posted by: {{item.name}}</p>
<p>{{item.review}}</p>
<button ng-click="edit($index)">Edit</button>
<button ng-click="delete($index)">Delete</button>
</div>
</div>
Then in your controller:
$scope.edit = function(index) {
$scope.all[index] = // Your logic here.
};
$scope.delete = function(index) {
$scope.all[index] = // Your logic here.
};
I try to use angular-ui-tree, but collapse not working. I use example from their github with minor changes, but id did not help.
My example:
http://plnkr.co/edit/MIMQ0GWnhQnZ1AhhKzo5?p=preview
<body ng-controller="tCtrl">
<div class="tree">
<div class="row">
<div class="col-sm-12">
<h3>Basic Example</h3>
<button ng-click="expandAll()">Expand all</button>
<button ng-click="collapseAll()">Collapse all</button>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div ui-tree="" id="tree-root">
<ol ui-tree-nodes="" ng-model="listss">
<li ng-repeat="t in listss" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button data-nodrag="" ng-click="toggle(this)">saad</button>
{{t.name}}
</div>
<ol ui-tree-nodes="" ng-model="t.list" ng-class="{hidden: collapsed}">
<li ng-repeat="s in t.list" ui-tree-node="">
<div ui-tree-handle="" class="tree-node tree-node-content">
<button ng-click="toggle(this)">sad</button>
{{s.name}}
</div>
</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
</div>
</body>
You miss CSS class. Please, insert your file CSS.
.hidden {
display: none!important;
visibility: hidden!important;
}
Github use bootstrap.min.css
Try the following things:
add some options from in your controller:
$scope.treeOptions = {
accept: function (sourceNodeScope, destNodesScope, destIndex) {
return false;
},
};
2.get the treeview:
var getRootNodesScope = function () {
return angular.element(document.getElementById("tree-root")).scope();
};
add the collapse / expand functions to your controller:
$scope.collapseAll = function () {
var scope = getRootNodesScope();
scope.collapseAll();
};
$scope.expandAll = function () {
var scope = getRootNodesScope();
scope.expandAll();
};
Replace the following line :<div ui-tree="" id="tree-root">
with div ui-tree="treeOptions>"
5.Optional: Place the id="tree-root" on your <ol> element.
I'm trying to implement a shortlisting functionality in a case where I'm using ng-click inside ng-repeat.
While the $index is being displayed correctly outside the ng-click, $index is only the index of the last object in the JSON array in all the cases where the html is generated using ng-repeat.
I was expecting the respective venue or venue.id to be passed as an argument to shortlistThis(). I'm guessing that this could be an issue related to event binding.
Can someone help me understand what's going wrong here and probably a better way to do this if possible.
I did try checking this Bind ng-model name and ng-click inside ng-repeat in angularjs The fiddle here works just fine but, mine doesn't.
Update: I've found something interesting here. When the shortlist button is placed just under the ng-repeat, it work just as intended. But when, nested inside a div with a ng-class, it isn't working as intended. Can anyone explain and suggest a fix for this ?
//locationsapp.js var locationsApp = angular.module('locationsApp', []);
var venues = [{
id: "Flknm",
name: "ship",
}, {
id: "lelp",
name: "boat",
}, {
id: "myp",
name: "yacht",
}, ];
var shortlistedVenues = [];
var locationsApp = angular.module('locationsApp', ['ui.bootstrap']);
locationsApp.controller("getvenues", function($scope) {
$scope.venues = venues;
$scope.shortlistThis = function(venue) {
console.log(venue);
if (shortlistedVenues.indexOf(venue) == -1) {
shortlistedVenues.push(venue);
//alert('If');
} else {
console.log('already shortlisted')
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="locations" ng-app="locationsApp">
<div ng-controller="getvenues">
<div ng-repeat="venue in venues" ng-mouseover="" class="venue">
<div ng-controller="manageInfo">
<div class="row-fluid">
<div class="control" ng-click="showInfo()">
</div>
<div class="maps" class="info">
<div ng-class="class">
<div class="close-info" ng-click="hideInfo()">
<i class="fa fa-times">
</i>
</div>
<div class="row full-venue-contents" ng-app="ui.bootstrap.demo">
<div class="">
<div class="row-fluid myclass">
<div class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup" ng-click="shortlistThis(venue)">
Shortlist{{$index}}
</button>
</div>
</div>
</div>
</div>
</div>
<!-- End of Full Info Container -->
</div>
</div>
</div>
</div>
<div class="compare">
<button type="button" class="btn btn-default btn-lg btn-sup">
Compare ( {{shortlistedVenues.length}} )
</button>
</div>
</div>
</div>
</div>
</div>
The problem is with your button div which was position: fixed, it is actually showing the 1st button but clicking on it firing last button click, I'd suggest you should suggest you render only the shortlist button which has been selected by you. For that you can use ng-if and render those button which index is the same as that of selected $index
HTML
<div ng-if="selected==$index" class="button-holder">
<div class="row-fluid">
<div class="col-md-4 col-xs-4 text-center btn-grid">
<button type="button" class="btn btn-default btn-lg btn-sup"
ng-click="shortlistThis($parent.$index)">Shortlist{{$index}}</button>
</div>
</div>
</div>
& then put ng-click="selected='$index'" on ng-repeat div like
<div ng-repeat="venue in venues" class="venue" ng-click="selected=$index">
Working Fiddle
Hope this could help you, Thanks.
I have a problem with angularJS.
I have a controller that execute a loop. For every element in the list I display all the informations.
Inside every loop, I added another controller (I guess is not a best practice already).
From the inner controller i want to access data from the outer controller.
Now, I don't mind doing this by assigning metadata on the html code, or by javascript code in the controller.
Here what I have done:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<div ng-controller="PostHeart" class="likeHolder" ng-init="isActive={{e.Post.isActive}}">
<button ng-click="toggleActive($index)"
ng-class="{true: 'loveButtonActive', false: 'loveButton'}[isActive]"
class="">❤</button>
</div>
</div>
</div>
</div>
</div>
This code: ng-init="isActive={{e.Post.isActive}} doesn't work as supposed.
I also tried to assign with data-myData="{{e.Post.isActive}} but at runtime when i tried to access myData from the controller it does access the string {{e.Post.isActive}} instead of accessing the replacement of that placeholder.
Any idea?
Create a directive:
yourModule.directive('postHeart', function() {
return {
restrict: 'E',
scope: {
'e': '=',
'index': '='
},
controller: function($scope) {
var isActive = $scope.e.Post.isActive;
$scope.btnClass = isActive ? 'loveButtonActive' : 'loveButton';
$scope.toggleActive = function(index) {
var postId = $scope.e.Post.id; // access data from the parent controller
// ...
};
},
template: "<button ng-click=\"toggleActive(index)\" ng-class=\"btnClass\">❤</button>"
};
});
Then use it in template:
<div ng-controller="PostListCtrl">
<div ng-repeat="e in posts" class="col-lg-3 col-md-4 col-sm-12 col-xs-12">
<div class="galleryElement effect6">
<div class="innerGalleryElement">
<div>
<img class="img-responsive" src="" /><!--{{e.Post.cover}}-->
</div>
<div class="lowerBarHolder">
<div class="float-left avatar">
<div class="shadow">
<img src="{{e.Post.author_avatar}} " />
</div>
</div>
<div class="float-left description">
{{e.Post.title}} <br />
{{e.Post.author}}
</div>
<post-heart e="e" index="$index" class="likeHolder"></post-heart>
</div>
</div>
</div>
</div>
My HTML is as follows:
<div class="cell">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()"></i>
</div>
</div>
When you click the <i>, I want to add an active class to the parent that has .cell currently. How is this doable with AngularJS?
OK, according to your last comment, if your cells are in a loop you should have mentioned that in your question. I'm gonna assume you use ng-repeat.
I have something like this which works. The active class also get removed if you click another.
HTML:
<div ng-repeat="cell in [0,1,2]" data-ng-class="{cell:true, active:index=='{{$index}}'}">
<div class="offset-container pull-left">
<i data-ng-click="activate($index)">Activate Me</i>
</div>
</div>
Controller:
$scope.activate= function(index){
$scope.index=index;
};
Here is one way, using ng-class
<div class="cell" ng-class="{'active': isActive==true}">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()">clicky</i>
</div>
</div>
controller:
function MyCtrl($scope) {
$scope.doCtrlStuff = function(){
$scope.isActive = true;
}
}
<div class="cell" ng-class="{'active': isActive}">
<div class="offset-container pull-left">
<i data-ng-click="isActive = !isActive"></i>
</div>
</div>
You can do this from here: http://docs.angularjs.org/api/ng.directive:ngClass
<div data-ng-class="{cell:true, active:clickedIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doCtrlStuff()"></i>
</div>
</div>
You would use a class:boolean pattern for the ng-class expression.
And in your controller:
$scope.doCtrlStuff = function() {
$scope.clickedIcon = true;
}
UPDATE:
If you want to do a radio button:
<div data-ng-class="{cell:true, active:clickedDogIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doDogStuff()"></i>
</div>
</div>
<div data-ng-class="{cell:true, active:clickedCatIcon}">
<div class="offset-container pull-left">
<i data-ng-click="doCatStuff()"></i>
</div>
</div>
$scope.doDogStuff = function() {
$scope.clickedDogIcon = true;
$scope.clickedCatIcon = false;
}
$scope.doCatStuff = function() {
$scope.clickedDogIcon = false;
$scope.clickedCatIcon = true;
}