What I am trying is to expand the button when button is clicked..At the same time when u want to delete the textbox I am unable identify the process.The first appending of text boxes had been done in the below fiddle.can anyone solve for delete operation
http://plnkr.co/edit/pI9BSWVLYxiSK2bbKuJW?p=preview
to add text boxes
//
$scope.addContact = function() {
$scope.contacts.push({
})
}
HTML
<li ng-repeat="contact in contacts track by $index">
<input type="text" /><button ng-click="removeContact($index)">-</button>
</li>
Notice I have added a removeContact() method to the button and this is the method:
$scope.removeContact = function(index) {
$scope.contacts.splice(index, 1);
}
Here is the plnkr
Related
Im using ionic framework and Im trying to create a phone list which can add and delete the user entered phone no.Here the user entered numbers are listed with check box on clicking the add button.When the user selects the check-box and clicks the delete button, he must be able to delete the selected check box phone number.Here the problem is while using the delete button, it doesn't delete the selected check box instead it is deleting the first value entered in the list. So please help me to delete only user selected check-box items.
html code:
<div>
<ion-checkbox ng-model="phoneno" ng-repeat="y in phonelist">
<span data-ng-bind="y"> {{y}}</span> </ion-checkbox>
<button ng-click="remove($index)" value="Delete">Delete</button><br>
</div>
<br>
<br>
<div>
<!label class="item item-input item-floating-label">
<input ng-maxlength="10" ng-model="phone"> <br>
<button ng-click="add()" value="Add">Add</button><br>
<!/label>
</div>
</ion-content >
</ion-view>
js code:
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.controller('addAdmin',['$scope',function($scope){
$scope.phonelist=[];
$scope.add=function(phone){
$scope.phonelist.push($scope.phone);
$scope.phone='';
}
$scope.remove=function(uuid){
var x=$scope.phonelist[uuid];
$scope.phonelist.splice(uuid,1);
}
}]);
Sorry for my english. I'm foreigner..
The problem is that your loop ends before the button, so when the button gets clicked the $index is always 0.
Because its not inside the element "ion-checkbox".
Here is my solution: put ng-click inside the checkbox and call to function with the $index.
And in the js, save the index on a scope var. So if the delete button gets clicked, delete the index that you saved on the previous function.
I hope that i helped.
It seems like you mean something else than your code says. You probably want to delete all phones that are checked, when clicking the button. Therefore you don't need the $index property, but just loop through the phones and delete the ones that are checked.
You will have to keep track of a 'checked' property of each phone, so you know which are checked. You can do this by using an object which holds the phone information, instead of just a string:
<div>
<!-- ng-model to a property of the phone that keeps track if the phone is checked -->
<ion-checkbox ng-model="y.checked"
ng-repeat="y in phonelist">
<span data-ng-bind="y.number">{{ y.number }}</span>
</ion-checkbox>
<button ng-click="removeSelected()" value="Delete">Delete</button><br>
</div>
<!-- ng-model to a property of the phone object -->
<input type="text" ng-model="phone.number" />
And in your controller:
$scope.add = function() {
$scope.phonelist.push($scope.phone);
}
$scope.removeSelected = function() {
var i = $scope.phonelist.length;
// reversed loop because you change the array
while (i--) {
var phone = $scope.phonelist[i];
// If phone is checked, remove from list
if(phone.checked) {
$scope.phonelist.splice(i, 1);
}
}
}
See this jsfiddle
Or see this jsfiddle where I included Ionic
It seems that you're mixing the add and remove functions, try to separate those as below.
.controller('addAdmin',['$scope',function($scope){
$scope.phonelist=[];
//Add function
$scope.add=function(phone){
$scope.phonelist.push(phone);
$scope.phone='';
}
//Remove function
$scope.remove = function(index){
$scope.phonelist.splice(index, 1);
};
}]);
add the following code in your controller
$scope.remove = function(index){
$scope.phonelist.splice(index, 1);
}
and that should work
I would like to display tags and when user clicks on each one, the tag color will change, and to have all the selected tags inside a hidden input for future submiting.
You could view the starting of the code inside: http://plnkr.co/edit/Bq2JAqSAahQl6lWDVWvC?p=preview
the html:
<div ng-controller="TagsSelectCtrl">
<div class="label label-default">man</div>
<div class="label label-default">woman</div>
<div class="label label-default">boys</div>
<div class="label label-default">girls</div>
</div>
i think you can use ng-repeat to create the tags like below,
in controller
$scope.tags = ['man', 'woman', 'boys', 'girls'];
in HTML
<div class="label label-default" ng-repeat="tag in tags"
ng-click="clicked = !clicked; add(tag, clicked)"
ng-class="{'clicked-color': clicked}">
{{ tag }}
</div>
if click on the tag then first it create a clicked variable in the ng-repeat's scope and toggle the value of clicked, and then call a add function in the controller,
at the controller,
$scope.add = function(item, clicked) {
// if click is true then add a item to choosed tags
if(clicked) {
$scope.choseTags.push(item);
} else {
if click is false then remove the added item from the choosed tags
var index = $scope.choseTags.indexOf(item);
$scope.choseTags.splice(index, 1);
}
}
and finally ng-class
...ng-class="{'clicked-color': clicked}"
if clicked is true then clicked-color css class add to the element
here is the live DEMO
I'm building an ecommerce site. I have a directive called "horizontalShoppingByCategoriesLayout" that watches the current filter criteria (to filter products being returned) and as the user changes those filter criteria the directive sets the search parameters $location.search(..).
...
filterParameters['searchtext'] = $scope.searchText;
filterParameters['order'] = searchorder;
filterParameters['page'] = page;
filterParameters['limit'] = limit;
$location.search(filterParameters);
On that same directive my code is set up to watch the url, and if it changes (due to changes in filter criteria) then to do a search to return products.
$scope.$watch(function () { return $location.url(); }, function (url){
if (url){
$timeout(function() {
getProducts();
});
}
});
The filter criteria are defined in a directive called "filterCriteriaVarietyCategoriesHorizontal" that is defined in the template of "horizontalShoppingByCategoriesLayout".
<div class="pull-leftt" ng-if='numberProducts != undefined && numberProducts > 0'>
<filter-criteria-horizontal execute-criteria-search=$parent.executeCriteriaSearch category-id=$parent.categoryId search-criteria-list=$parent.searchCriteriaList></filter-criteria-horizontal>
</div>
When a user hovers over the filter criteria category button, this triggers an angular event that causes an Angular-UI Bootstrap dropdown to drop down and show the options for that filter criteria category. The user can then click on the filter criteria option, which "horizontalShoppingByCategoriesLayout" detects and then calls a change on the $location search parameters (which changes the url and a webservice call for products is initiated).
The filter criteria options in the dropdown are a set of checkboxes. My problem is when the user clicks on one of these checkboxes, it causes the dropdown to close, which should only happen when the user hovers off of the button that initiated the dropdown opening. I already fixed the problem where the clicking on the checkbox it's self causes the dropdown to close by calling ng-click="$event.stopPropagation()" on the checkbox. Here is my code for the filtercriteria category, dropdown, and checkboxes.
<div class="coll-md-12" ng-mouseleave="closeAll()">
<div class="btn-group" dropdown is-open="status.isopen">
<button ng-mouseleave="close()" ng-mouseenter="open()" type="button" ng-class="{'filter-criteria-variety-category-name-hover': filterCriteriaCategoryActive}" class="btn btn-link dropdown-toggle filter-criteria-variety-category-name" dropdown-toggle ng-disabled="disabled">
{{searchCriteria.criteriaName}}<span class="caret"></span>
</button>
<div class="dropdown-menu">
<div class="search-criteria-values" ng-mouseleave="close()" ng-mouseenter="keepOpen()">
<div ng-if="searchCriteria.imageBasedFilter == true">
<filter-criteria-options-visual filter-criteria-options=$parent.searchCriteria.criteriaOptionValues></filter-criteria-options-visual>
</div>
<div ng-if="searchCriteria.imageBasedFilter == false">
<div class="col-md-12 no-padding" ng-repeat="searchCriteriaOption in searchCriteria.criteriaOptionValues">
<div class="pull-left filter-criteria-checkbox-item">{{searchCriteriaOption.criteriaOption}} <input ng-click="$event.stopPropagation()" id="{{searchCriteriaOption.criteriaOption}}" type="checkbox" ng-model="searchCriteriaOption.checked"/></div>
</div>
</div>
</div>
</div>
</div>
I'm sure that it is adding search parameters to the url with $location.search(...) that is causing the dropdown to close because if I comment out the line that adds the (filter criteria to the) search parameters to the url in the directive "horizontalShoppingByCategoriesLayout", then the dropdown does not close.
...
filterParameters['searchtext'] = $scope.searchText;
filterParameters['order'] = searchorder;
filterParameters['page'] = page;
filterParameters['limit'] = limit;
//$location.search(filterParameters);
With the checkboxes in the dropdown I was able to stop the dropdown from closing by calling stopPropagation() on the click event, but for a change in the $location search parameters I don't know how to stopPropogation for that change.
Does anyone have an idea how to cause the dropdown to not close when changes are made to the $location.search parameters?
I had the same issue then I looked into the source code of angular boostrap ui and found:
$scope.$on('$locationChangeSuccess', function() {
scope.isOpen = false;
});
And a hacky solution would be remove the listener
$scope.$$listeners.$locationChangeSuccess = [];
in your dropdown controller
The solution from user3217868 worked well for me but I had to execute the code once the document was fully loaded like on my code below.
angular.element(document).ready(function () {
$scope.$$listeners.$locationChangeSuccess = [];
});
Posting here in case it may be helpful to someone else.
Am successful in building angularjs app of multiple dependent radio button.
But have a requirement to default select a radio button if only one is present.
Tried out the stuff in Angularjs: radio button checked, but it doesn't work for multiple radio buttons.
Code Explanation:
HTML Code:
I have two radio buttons. Second set of radio buttons are generated based on the first.
<div>
<ul >
<li> Part One : </li>
<li ng-repeat="f in Input"><input type="radio" name="oneInput" ng-value="f" ng-model="$parent.One"> {{f.Name}} </input></li>
</ul>
</div><br/>
<div>
<ul>
<li> Part Two : </li>
<li ng-repeat="u in filteredUser = (One.User | filter: { Valid: 'Y' })"><input type="radio" name="userInput" ng-value="u" ng-model="$parent.Two"> {{u.Name}} </input></li>
</ul>
</div><br/>
If I select a radio button in first set, and second set has only one radio button, it must be selected by default.
For example, if I select D, I get the D2 radio button which must be selected.
Complete Code # http://plnkr.co/edit/dY2syxNWobxHpiVKIuux?p=preview
Appreciate your response.
please see here: http://plnkr.co/edit/QVvN6rP3wlyxbOJaAGHQ?p=preview
$scope.$watch('One', function(value) {
if (value.Name) {
var users = $filter('filter')($scope.Input, value);
var vaildUsers = $filter('filter')(users[0].User, {
Valid: "Y"
});
if (vaildUsers.length == 1) {
$scope.Two = vaildUsers[0];
} else
{
$scope.Two = {};
}
}
});
I'm a noob to AngularJS. As a learning exercise I am creating a typeahead control.
The typeahead is comprised of a text box for filtering the options, an unordered list for displaying the menu of short-listed options, and a Show/Hide button for manually toggling the list.
The text box filters the li elements using ng-repeat. When selecting an li item from the list, I populate the text box with the selected value, and then hide the list.
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="hideMenu(); query.id = item.id">
{{item.id}}
</li>
</ul>
</div>
My issue is that when the value is assigned to the text box, the list is momentarily filtered to the one option selected (because the text box is also the source of the ng-repeat filter), before hiding the menu. What I want id for the menu to be hidden without being refreshed with the filter first.
It should be noted that this only occurs when using CSS transitions which I am using to fade the menu out.
Here is a plnkr to illustrate.
Here's a working Plnkr. I basically gave your menu time to finish its animation before setting the value. Relevant code is as follows:
$scope.selectItem = function(id){
$scope.isActive = false;
$timeout(function(){
$scope.query.id = id;
}, 250);
}
...and the HTML using the newly created selectItem method:
<div class="xtab-typeahead" ng-controller="xTabTypeAheadCtrl">
<input type="text" class="xtab-typeahead-search" placeholder="{{type}}" ng-model="query.id" ng-focus="showMenu()" ng-init="query.id = undefined" />
<button ng-click="toggleMenu()">Show/Hide</button>
<ul class="xtab-typeahead-menu" ng-class="{true:'active',false:''}[isActive]">
<li ng-repeat="item in menuItems | filter:query"
ng-click="selectItem(item.id)">
{{item.id}}
</li>
</ul>
</div>