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.
Related
I am making a game that has 50 buttons and everybutton has an identity as a color and an id. On clicking every button there color changes to what it has been defined. If the user clicks on the 25th button , he wins. Only three tries for clicking. I am however unable to do the first step of creating buttons. Please help. I use angularjs1.
<html ng-app="Bluebox">
<head>
<title>BlueBox</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="BoxController">
<button type="button" value = "bluebox" >
<li ng-repeat="x in boxlength">
{{index+1}}
</li>
</button>
</div>
<script>
angular.module("Bluebox",[])
.controller("BoxController",["$scope",function($scope){
$scope.boxlength=50;
$scope.index=0;
}])
</script>
</body>
</html>
Your ng-repeat is not at the right place. You want to repeat buttons.
<button ng-repeat="..." type="button" value="bluebox"></button>
Then the format of ng-repeat is not correct. This directive doesn't repeat a number of times, it repeats in an array.
What we usually do is create a method that create an array based on a number:
<button ng-repeat="i in times(number)" type="button" value="bluebox"></button>
Get number could look like:
$scope.number = 5;
$scope.times= function(x) {
return new Array(num);
}
Since the array created has indentical "values" you need to track by $index
function Main($scope) {
$scope.number = 50;
$scope.times= function(x) {
return new Array(x);
}
}
angular.module('test', []);
angular.module('test')
.controller('Main', Main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="test">
<div ng-controller="Main">
<button ng-repeat="i in times(number) track by $index" type="button">{{$index}}</button>
</div>
</div>
If i am having One page with 2 tabs. and if from 2nd tab i am navigating to different page. then how to come back to that 2nd tab from navigated page? i am using $StateProvider.
Thanks.
Here is the example code and it works well,
index.html
----------------
<html>
<head>
<title>Tabs Directive</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.0/angular.min.js"></script>
<script src="tabController.js"></script>
</head>
<body>
<div class="container">
<section ng-app="myApp" ng-controller="TabController as tab">
<ul class="nav nav-pills">
<li ng-class="{active:tab.isSet(1)}"><a href ng-click="tab.setTab(1)">Tab 1</a></li>
<li ng-class="{active:tab.isSet(2)}"><a href ng-click="tab.setTab(2)">Tab 2</a></li>
<li ng-class="{active:tab.isSet(3)}"><a href ng-click="tab.setTab(3)">Tab 3</a></li>
</ul>
<div ng-show="tab.isSet(1)">
<h4>Tab 1</h4>
</div>
<div ng-show="tab.isSet(2)">
<h4>Tab 2</h4>
</div>
<div ng-show="tab.isSet(3)">
<h4>Tab 3</h4>
</div>
</section>
</div>
</body>
</html>
tabController.js
----------------
var app = angular.module('myApp', []);
app.controller('TabController', function () {
this.tab = 1;
this.setTab = function (tabId) {
this.tab = tabId;
};
this.isSet = function (tabId) {
return this.tab === tabId;
};
});
Thanks Atul :)
but this solution worked for me.
we can have one flag varibale ilke "this.isPageVisited=false" in APPCONTEXT.js file. so that variable will be available throughout the project. so suppose from tab of one page i am going to different page, what i do is i set isPageVisited=true via setter method in visted page . so now to come back to tab page again, we check the variable if its true or not. if it is true we put the "active" class to the tab element.
so that the we can have current tab active from where navigation started.
I'm new to this please bear with me
I'm trying to achieve div toggle and button class added when button clicked (active), i looked every where i been trying to do this for over 6 hours now :(.
here is my NAV div
<div id="sidebar-wrapper-button" ng-controller="Main">
<ul class="nav nav-pills">
<li ng-click="isInfo = !isInfo" ng-class="{'active':isInfo}"></li>
<li ng-click="isSetting = !isSetting" ng-class="{'active':isSetting}"></li>
</ul>
</div>
Content Div
<div ng-class="{'ng-show':isSetting,'ng-hide':!isSetting,'ng-hide':isInfo,}">
<h1>Setting</h1>
</div>
<div ng-class="{'ng-show':isInfo,'ng-hide':!isInfo,'ng-hide':isSetting}">
<h1>Info</h1>
</div>
app.js
//toggle Setting
app.controller('Main', function($scope) {
$scope.isSetting = false;
});
//toggle Info
app.controller('Main', function($scope) {
$scope.isInfo = false;
});
Thank you.
If I understood your request right, here's what I would do:
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
$scope.tabActive = null; // here insert 1, 2 or null depending on what the initial selection should be
});
li a{text-decoration: none;}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="myApp">
<div ng-controller="Main">
<ul class="nav nav-pills">
<li ng-click="tabActive = 1" ng-class="{'active':tabActive == 1}">
</li>
<li ng-click="tabActive = 2" ng-class="{'active':tabActive == 2}">
</li>
</ul>
<div ng-show="tabActive == 1">
<h1>Info</h1>
</div>
<div ng-show="tabActive == 2">
<h1>Setting</h1>
</div>
</div>
</div>
Simpler way is to use angular expression {{}} to output appropriate string:
<h1>{{isSetting ? 'Setting' : 'Info'}}</h1>
Requires less markup and less class change logic code and ultimately less scope watches
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>
I want to get an alert button for showing the filtered object of my filtered data in Angular.
In my HTML template i can get the object i want with: {{(portals|myFilter:or| filter:search )}}
I have my button :
<a ng-href='#here' ng-click='go()' >click me</a>
and my function go() is already working but now I need the object wich I can call with : {{(portals|myFilter:or| filter:search )}} in my go() function... Any idea?
I have already tried to write the object in the button but I didnt even believed that this is too easy. There must be a way to get the same object in my controller ?
<a ng-href='#here' ng-click='go(myFilter,search)' >click me</a>
You can assign filteredItems with the following syntax:
{{filteredItem = (portals|myFilter:or| filter:search )}}
<a ng-href='#here' ng-click='go(filteredItem)' >click me</a>
You can check the below snippet for an example.
angular.module("myApp", []).controller("myCtrl", function($scope) {
$scope.items = ["apple", "banana", "orange"];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<input ng-model="query"/>
{{filteredItems = (items | filter:query)}}
<div>Filtered Items: {{filteredItems}}<div>
</div>
</body>
</html>