I have an Ionic list in my app and im populating it dynamically with elements. Im trying also to attach a tap/click listener that will just alert the DOM list element.
Im trying to avoid using jQuery and do it just by angular. I tried the following and i dont understand why the click functions dont fire.
HTML
<ul class="list">
<li class="item" data-ng-repeat="c in contacts()" data-ng-click="selectedElem(selection)">
{{ c.displayName }}
</li>
</ul>
The relevant controller code:
$scope.selectedElem = function(selection){
alert(selection);
};
Replace data-ng-click="selectedElem(selection)" with data-ng-click="selectedElem(c)" , c is the that specific item. As you are doing c in contacts().
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.contacts = function(){
return [{displayName:"abc"}, {displayName:"def"}, {displayName:"igh"}];
}
$scope.selectedElem = function(selection){
alert(selection);
};
});
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular-route.js"></script>
<body ng-app="myApp" ng-controller="MainCtrl">
<ul>
<li data-ng-repeat="c in contacts()" data-ng-click="selectedElem(c)">
{{ c.displayName }}
</li>
</ul>
</body>
Related
In angularjs to show/hide dynamic submenu, I am adding and removing dynamic classes in js file. Every time when the state changes in url (i.e ui-sref={{mymenu.url}}) sub menu is not visible. If there is no state change sub menu is working properly. Can anyone please suggest.
Html
<li ng-repeat='mymenu in menuItems' ng-click="showHideMenu($event);" >
<a class="iconsize" ui-sref={{mymenu.url}}>
<i class={{mymenu.image}}></i> <strong>{{mymenu.menuName}}</strong>
<span class="fa fa-chevron-down"></span>
</a>
<ul class="submenuHide">
<li class="" ng-repeat='submenu in mymenu.submenu'>
<a>{{submenu.submenuName}}</a>
</li>
</ul>
JS
$scope.showHideMenu = function(event) {
var classname = event.target.parentElement.parentElement.children[1].className;
if(classname == 'submenuHide'){
$(event.target.parentElement.parentElement.children[1]).removeClass('submenuHide');
$(event.target.parentElement.parentElement.children[1]).addClass('submenuShow');
}else if(classname == 'submenuShow'){
$(event.target.parentElement.parentElement.children[1]).removeClass('submenuShow');
$(event.target.parentElement.parentElement.children[1]).addClass('submenuHide');
}
}
A couple things. One, you'll need to make sure your menu is outside of the individual templates you're working with. Two, using ng-class bound to an ng-model ensures that your menu state is included in the digest cycle. This will save you the jqLite and dom parsing logic.
Here's an example plunker.
So your code might look like this:
<body ng-controller="MainCtrl">
<a ui-sref="hello">Hello</a>
<a ui-sref="about">About</a>
<button ng-click="toggleMenu()">Show / Hide Menu</button>
<ui-view></ui-view>
<ul ng-class="{showMenu: show, hideMenu: !show}">
<li ng-repeat="letter in ['a','b','c','d']">{{letter}}</li>
</ul>
</body>
With this JS:
app.controller('MainCtrl', function($scope) {
$scope.show = false;
$scope.toggleMenu = function() {
$scope.show = !$scope.show;
};
});
In Angular I wanted to bind $index to controller. How can I send $index value in to my controller. Here is my html code.
<body>
<div class="container">
<div class="row row-content" ng-controller="demoController as demoCtrl">
<ul>
<li ng-repeat="val in demoCtrl.list" >Hello {{$index}}</li>
</ul>
</div>
</div>
Here is my controller code
var app = angular.module('confusionApp',[])
app.controller('demoController', function(){
var list = [1,2,3,4,5];
this.list = list;
var array = ['abc','def','ghi','jkl','mno']
this.array = array
console.log(this.array[index]);
});
I need to use ng-modal in HTML and bind that value to some variable in my controller.
Based on the selection of index, it should check in array and respective array should have to print.
Can any of you please help
To get your current iteration position in your controller you have define a function.
So your html code like this.
<body>
<div class="container">
<div class="row row-content" ng-controller="demoController as demoCtrl">
<ul>
<li ng-repeat="val in demoCtrl.list" ng-click="dispArray($index)">Hello {{$index}}</li>
</ul>
</div>
</div>
And your controller code
var app = angular.module('confusionApp',[])
app.controller('demoController', function($scope){
$scope.dispArray = function(index){
// console.log(index);
// your code
}
});
Depending on what you're trying to accomplish you might be better served creating a custom iterator.
function makeIterator(array){
var nextIndex = 0;
return {
next: function(){
return nextIndex < array.length ?
{value: array[nextIndex++], done: false} :
{done: true};
}
}
}
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators
Angular is going to iterate over everything in the list when you use ngRepeat. If you're trying to track which list item a user clicks then you'll just add that in there using $index.
<li ng-repeat="val in demoCtrl.list" >
<span ng-click="demoCtrl.userClicked($index)"> Hello {{$index}}</span>
</li>
If you're just trying to print the data in each item, ng-repeat is already iterating everything for you.
<li ng-repeat="val in demoCtrl.list" >
<span ng-click="demoCtrl.userClicked($index)"> Hello {{val}}</span>
</li>
It all depends on what you're trying to do.
i dont konw what u want to do. if u want to use event. you can pass $index to your controller function like:
<li ng-repeat="val in demoCtrl.list" ng-click="getIndex($index)">Hello {{$index}}
$scope.getIndex = function($index) {
console.log($index)
}
hope to help u.
I have made the following plunker:
https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview
I would like the value of the input to be the item.name clicked.
Here is the code:
<body ng-app="myApp">
<div ng-controller="MyController">
<ul ng-repeat="item in collection">
<li ng-click="edit('{{item.name}}')">{{item.name}}</li>
</ul>
</div>
<input name="myinput" ng-model="myinput" />
</body>
Js:
var app = angular.module('myApp', [])
.controller('MyController', function($scope, $http) {
$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];
$scope.edit = function(current_name) {
this.myinput = current_name;
console.log(current_name);
}
})
So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).
The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.
Finally, the input in the markup needs to be inside the div that defines the controller.
I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info
Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:
<li ng-click="edit(item.name)">{{item.name}}</li>
You don't have to call a function. Just do.
<li ng-click="$parent.myinput = item.name">
How do I implement delete on click of a tag? When I delete click something, the view is not reflected until I do refresh.
<div class="dropdown">
<span ng-repeat="tag in tag track by $index" data-toggle="dropdown">[[tag]]</span>
<!--<a data-toggle="dropdown" href="#">Dropdown trigger</a>-->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li ng-click="deleteHashtag(p_id, tag, $index)" class="cursor">Delete</li>
<li class="divider"></li>
<li ng-click="showHashtags(tag)" class="cursor">View All</li>
</ul>
</div>
Below is the Angular code
$scope.deleteHashtag = function(p_id,hashtag, index){
$http.get("/api/hashtag/delete?contactId="+p_id.toString()+"&hashtag="+hashtag.toString())
.success(function(response){
console.log(response);
if(response.SuccessCode){
console.log("Deleted Tag");
}
else {
console.log("Delete fail");
}
});
$scope.hashtag.splice(index, 1);
};
Try putting the ng-repeat attribute inside the dropdown div. That way you will get a separate dropdown for each tag. You may need to turn the dropdown div into a span for it to look the same.
I wrote a little demo page that seems to do what you want. Click on each tag to bring up its own dropdown menu, then click delete and watch it go away. The demo code is below, and also lives in plunker here.
Some things to watch out for if you copy/paste:
The array of tags is called tags in my code. It was referred to as tag in your html and hashtag in your javascript.
I used $parent to access the dummy p_id variable since it's now being accessed from within the ng-repeat.
Good Luck!
<!doctype html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script>
angular.module('myApp', [])
.controller('MyController', ['$scope', function($scope) {
$scope.tags = ['javascript', 'webgl', 'angularjs', 'twitter-bootstrap', 'jquery'];
$scope.p_id = 'some value';
$scope.deleteHashtag = function(p_id, hashtag, index) {
// I removed the api call here since I don't have access to it and
// it doesn't seem to be part of the problem. You may want to put
// the splice inside the success method instead of outside though.
console.log('delete hash tag ' + p_id + ' ' + hashtag + ' ' + index);
$scope.tags.splice(index, 1);
};
$scope.showHashtags = function(tag) {
console.log('show hash tags');
// some function that does something not related to the problem at hand.
};
}]);
</script>
<style>
.spacey { margin-left: 3px; margin-right: 3px;}
.cursor { cursor: pointer; }
</style>
</head>
<body>
<div ng-controller="MyController as ctrl">
<span class="dropdown cursor" ng-repeat="tag in tags track by $index">
<span class="label label-default spacey" data-toggle="dropdown">{{tag}}</span>
<ul class="dropdown-menu">
<li ng-click="deleteHashtag($parent.p_id, tag, $index)" class="cursor">Delete</li>
<li class="divider"></li>
<li ng-click="showHashtags(tag)" class="cursor">View All</li>
</ul>
</span>
</div>
</body>
</html>
Try this.tag
<li ng-click="deleteHashtag(p_id, this.tag, $index)" class="cursor">Delete</li>
In case its not working, please post ur angular code as well
Your <li ng-click="deleteHashtag(p_id, tag, $index)" class="cursor">Delete</li> element is outside ng-repeat, so you pass to the deleteHashtag function full tag list. ng-repeat repeats the element where it is inserted and every child element.
I am new to Angular. I am trying to get data from the Angular controller into Laravel Blade. For some reason it is not working.
The socket.io part is working. I did console.log on $scope.message and it is there.
So the problem is between Angular code and Laravel blade. My code is:
<body ng-app="app">
<div ng-controller="AppCtrl">
<input id="auth_id" type="hidden" value="{{ Auth::user()->id }}" />
<h1>New Users</h1>
<ul>
<li ng-repeat="message in messages">
#{{ message.body }}
</li>
</ul>
</div>
<script src="{{ asset('/js/socket.io.js') }}"></script>
<script>
var app = angular.module('app', [])
.controller('AppCtrl', function ($scope){
var socket = io('http://192.168.10.10:3000');
$scope.id = document.getElementById('auth_id').value;
socket.on("user."+ $scope.id + ":App\\Events\\EventDeletedOrEditedBroadcast", function(data) {
$scope.messages = data.message;
});
});
</script>
</body>
Thanks in advance.
the variable you declare in the scope is not the same that wich you want to acces
$scope.messages
#{{message}}
that S
This issue is with the Binding; Make sure messages is in the $scope.
Check: <input type="text" ng-model="test">
In the controller:
$scope.test = data.message(any string);
If it works then there is definitely a binding issue.
I know is kind of an old question and I am pretty new to all this stuff (laravel, angular, etc) but I think what you were looking for was this:
In order to get the angular scope working here
<li ng-repeat="message in messages">
#{{ message.body }}
</li>
and since the "{{" "}}" is used by laravel, you have to define another way to get the scope, by using $interpolateProvider, like this
var app = angular.module('app', []);
app.config(config);
config.$inject = ['$interpolateProvider'];
function config($interpolateProvider){
$interpolateProvider.startSymbol('<<');
$interpolateProvider.endSymbol('>>');
}
so, then, you change the #{{
<li ng-repeat="message in messages">
<< message.body >>
</li>
Hope it helps someone