I want to create a filter in angular JS . My list comes from database as CouponsOperationResult objResult = ViewBag.StoreList;
and there are 74 store names in this list. i want a filter where there is an input textbox.first thing is the list shows up down filter accordingly. second thing is it should only show up when there is a key up event. third thing it should filter accordingly with the value in the textbox and fourth is that on click on list it should populate value in textbox.
Layout = "~/Views/Shared/_LayoutCoupons.cshtml";
CouponsOperationResult objResult = ViewBag.StoreList;
//List <Store> objStoreList = objResult.Storelist;
int ListCount = objResult.Storelist.Count();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="~/content/css/coupons.css">
</head>
<body>
<section class="section panel">
<h2 class="no-margin-top">Submit your Coupon:</h2>
<div class="panel-body">
<form class="form" id="SubmitCoupon" name="SubmitCoupon" method="post">
<div ng-app="StoreApp" ng-controller="Store">
<div class="col-md-11">
<div class="form-row">
<h4>STORENAME: </h4> <input type="text" ng-keyup="getkeys($event)" class="myInput form-control" name="txtStorename" id="txtStorename" ng-model="test" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName">
</div>
<ul id="myUL">
<li ng-repeat="x in StoreName | filter:test">
{{ x }}
</li>
</ul>
</div>
</div>
</div>
</section>
<script>
angular.module('StoreApp', []).controller('Store', function ($scope) {
$scope.StoreName = [
'Flipkart',
'Amazon',
'Snapdeal',
'Jabong',
'Trendin',
'Lenskart',
'Zovi',
'BabyOye',
'ShopMore24',
'BasicsLife',
'PrettySecrets',
'American Swan',
'ShopClues',
'FernsNPetals',
'Pepperfry',
'Koovs',
'FoodPanda',
'BookmyFlower',
'Printvenue',
'Amar Chitra Katha',
'Booking',
'TicketGoose',
'Myntra',
'FirstCry',
'Archies Online',
'Dominos',
'Bewakoof',
'Healthkart',
'Zivame',
'eBay',
'Paytm',
'Surat Diamond',
'Groupon',
'indiatimes',
'Yatra Hotels',
'Thomas Cook Hotels',
'FabFurnish',
'VistaPrint',
'KFC',
'Mobikwik',
'JustEat',
'Candere',
'Eureka Forbes',
'Simplilearn',
'Thomas Cook Flights',
'Nord51',
'ClickSense',
'The Mobile Store',
'MakeMyTripHotels',
'Expedia',
'HomeShop18',
'StarCJ',
'Fashionara',
'BigFlix',
'IndiaCircus',
'Yepme',
'Infibeam',
'Purplle',
'AliExpress',
'HappilyUnmarried',
'BagItToday',
'Croma',
'Naaptol',
'ManiacStore',
'D2HShop',
'AskMeBazaar',
'Rediff',
'Xiaomi',
'Syberplace',
'makemytrip',
'nearbuy',
'GreenDust',
'Tatacliq',
'LeMall'];
});
</script>
</body>
In this the list names are hard coded .and i want it from object but i dont know how to use scope as object
Here's an example that will do a quick search of the list on the value in the text box, and has two radio buttons that will sort the list in ascending or descending order. Almost everything is handled by AngularJS.
I also updated it to fill in a textbox when you click on any store.
(function() {
var app = angular.module('StoreApp', []);
var StoreController = function() {
var vm = this;
vm.sortType = "+";
vm.storeSearch = "";
vm.setSort = function(value) {
vm.sortType = value;
};
vm.fillBox = function(store) {
vm.selectedStore = store;
}
vm.StoreName = [
'Flipkart',
'Amazon',
'Snapdeal',
'Jabong',
'Trendin',
'Lenskart',
'Zovi',
'BabyOye',
'ShopMore24',
'BasicsLife',
'PrettySecrets',
'American Swan',
'ShopClues',
'FernsNPetals',
'Pepperfry',
'Koovs',
'FoodPanda',
'BookmyFlower',
'Printvenue',
'Amar Chitra Katha',
'Booking',
'TicketGoose',
'Myntra',
'FirstCry',
'Archies Online',
'Dominos',
'Bewakoof',
'Healthkart',
'Zivame',
'eBay',
'Paytm',
'Surat Diamond',
'Groupon',
'indiatimes',
'Yatra Hotels',
'Thomas Cook Hotels',
'FabFurnish',
'VistaPrint',
'KFC',
'Mobikwik',
'JustEat',
'Candere',
'Eureka Forbes',
'Simplilearn',
'Thomas Cook Flights',
'Nord51',
'ClickSense',
'The Mobile Store',
'MakeMyTripHotels',
'Expedia',
'HomeShop18',
'StarCJ',
'Fashionara',
'BigFlix',
'IndiaCircus',
'Yepme',
'Infibeam',
'Purplle',
'AliExpress',
'HappilyUnmarried',
'BagItToday',
'Croma',
'Naaptol',
'ManiacStore',
'D2HShop',
'AskMeBazaar',
'Rediff',
'Xiaomi',
'Syberplace',
'makemytrip',
'nearbuy',
'GreenDust',
'Tatacliq',
'LeMall'
];
};
app.controller("StoreController", [StoreController]);
})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="~/content/css/coupons.css"> </head>
<body>
<section class="section panel">
<h2 class="no-margin-top">Submit your Coupon:</h2>
<div class="panel-body" ng-app="StoreApp">
<form>
<div ng-controller="StoreController as vm">
<div>
<div>
<h4>STORENAME: </h4>
<input type="text" placeholder="Search for Store.." ng-model="vm.storeSearch"/>
<input type="text" placeholder="Selected Store" ng-model="vm.selectedStore" disabled />
<fieldset>
<label for="ascending">Ascending</label>
<input id="ascending" type="radio" ng-model="vm.sortType" name="group" ng-change="vm.setSort('+')">
<label for="descending">Descending</label>
<input id="descending" type="radio" ng-model="vm.sortType" name="group" ng-change="vm.setSort('-')">
</fieldset>
</div>
<ul id="myUL" ng-repeat="store in vm.StoreName | orderBy: vm.sortType | filter: vm.storeSearch">
<li ng-click="vm.fillBox(store)"> {{ store }} </li>
</ul>
</div>
</div>
This looks like you're recreating Angular-UI's UI-Select. Would that fill your needs? Don't recreate the wheel if you don't have to.
Hi all I am new to angularjs could anybody help me please? All what I need when I click a button the first checkbox in ng-repeat list to be checked. Am I doing anything wrong? Here is my code:
Checkbox
<fieldset class="top5">
<legend title="Categories"><span class="info blackLabelUpper"><b>Dish Categories</b><span class="TextCtrlReqBgImage"> </span></span></legend>
<span class="checkbox-list" ng-repeat="dishType in dishTypes">
<input type='checkbox' ng-click="toggleDishType(dishType)" ng-model="dishType.checked" value="{{dishType}}" ng-checked="selectedDish.Type.indexOf(dishType) > -1">
{{dishType}}<br />
</span>
</fieldset>
Button
<kendo-button id="btnNewDish" class="k-primary" ng-click="onNewDishClick(true)">
<i class="fa fa-plus fa-lg" aria-hidden="true"></i>New Dish
</kendo-button>
Function
scope.onNewDishClick = function (showNewDIshMessage) {
scope.dishTypes[0].dishType = true;
}
When you use ng-model on your inputs you don't need to use value to get result because ng-model save changes on self.
Feel free to ask question, and this sample maybe helps you.
var app = angular.module("app", []);
app.controller('ctrl', function($scope){
$scope.items = [
{somthing: false, title: 'a'},
{somthing: false, title: 'b'},
{somthing: false, title: 'c'},
{somthing: false, title: 'd'},
{somthing: false, title: 'e'}
]
$scope.checkAll = function(){
angular.forEach($scope.items, function(item){
item.somthing = !item.somthing;
});
}
$scope.checkFirstItem = function(){
$scope.items[0].somthing = !$scope.items[0].somthing;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<ul>
<li ng-repeat="item in items">
<input type="checkbox" ng-model="item.somthing">
{{item.somthing}}
{{item.title}}
</li>
</ul>
<button ng-click="checkAll()">check all</button>
<button ng-click="checkFirstItem()">check first item</button>
</div>
<div ng-repeat="restorent_type in restaurant_types" style="margin:5px;" class="col col-offset-10">
<label class="item item-radio radio-label {{restorent_type.RESCOD}}">
<input type="checkbox" name="group" ng-model="restorent.types" value="{{restorent_type.RESCOD}}" ng-click="filters.RESCOD = restorent_type.RESCOD" ng-checked="$first">
<div class="item-content">
{{restorent_type.RESCOD}}
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</div>
Or you can use the :
ng-model="dishType.checked" ng-init="dishType.checked=true"
I think the Function definition should be like this :
scope.onNewDishClick = function (showNewDIshMessage) {
scope.dishTypes[0].checked = true;
}
I am a newbie in angularjs; the scope value are not displaying in the views.
I have two apps: myApp and ram - each one having their controllers.
I'm trying to display scope values.
Only myApp shows values but ram does not.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-app="ram" ng-controller="myCtrl2">
First Name: <input type="text" ng-model="firstName2"><br>
Last Name: <input type="text" ng-model="lastName2"><br>
<br>
Full Name: {{firstName2 + " " + lastName2}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
<script>
var app2 = angular.module('ram', []);
app2.controller('myCtrl2', function($scope) {
$scope.firstName2= "ram";
$scope.lastName2= "babu";
});
</script>
You have to bootstrap modules to have multiple ng-app in your page.
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
<script>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [
{product_name: "Product 1", price: 50},
{product_name: "Product 2", price: 20},
{product_name: "Product 3", price: 180}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [
{username: "Nitin"},
{username: "Mukesh"}
];
}
);
angular.bootstrap(document.getElementById("App2"),['namesList']);
</script>
</body>
</html>
You can not use two apps on the same page. If you do that then you will need to use Angular Bootstrap.
First assign your second div an id e.g id ="ramID" to something like below
<div id="ramID" ng-app="ram" ng-controller="myCtrl2">
then add this line to your code to your script
angular.bootstrap(document.getElementById("ramID"),['ram']);
hope it helps.
Hello Everyone I have face a problem to create a object with ng-repeat. when i declare the Object then the same value in filled in the text box which has same ng-model value. if i am not Declare the object then duplicacy is not occures.
If i am declare the $scope.user = {}; in js file then problem is occures. please check this. Give me a solution ASAP.
My Fiddle Link Please Check This http://jsfiddle.net/Ladjkp5s/1/
Here is my Html file
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item + 1}}
<div>
Name: <input type="text" ng-model="user.name"><br>
Address: <input type="text" ng-model="user.add"><br>
Phone: <input type="text" ng-model="user.phn"><br>
ZipCode: <input type="text" ng-model="user.zip">
</div>
</li>
</ul>
</div>
</div>
Here is my JS File
var app = angular.module('myApp', []);
app.filter('slice', function() {
return function(arr, start, end) {
return arr.slice(start, end);
};
});
app.controller('MainController', function($scope) {
$scope.items = [];
$scope.user ={};
for (var i = 0; i < 5; i++) $scope.items.push(i);
});
Thanks.
The problem is that you are using same ng-model for every item.(user.fieldName) you have to use item.fieldName.
<div ng-app="myApp">
<div ng-controller='MainController' ng-init="start = 0; end = 5;">
Start: <input ng-model="start"> End: <input ng-model="end">
<ul>
<li ng-repeat="item in items | slice:start:end">{{item.index + 1}}
<div>
Name: <input type="text" ng-model="item.name"><br>
Address: <input type="text" ng-model="item.add"><br>
Phone: <input type="text" ng-model="item.phn"><br>
ZipCode: <input type="text" ng-model="item.zip">
</div>
</li>
</ul>
</div>
</div>
http://jsfiddle.net/3akwk7tv/
Yuu can not loop in controller function, but u can create controller that loops in html like in this example
<ul>
<li ng-repeat="theItem in myData.items">{{theItem.text}}</li>
</ul>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myData = {};
$scope.myData.items = [ {text : "one"}, {text : "two"}, {text : "three"} ];
});
</script>
i have a list of a few radio buttons and a input, and for some reason i can't get the selected radio value.
here is my example, or jsfiddle. If you look in the console and submit the form you can see that even if you select a radio button the response is undefined, but the input value comes in ok
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.tests = [{
"id": "1"
}, {
"id": "2"
}, {
"id": "3"
}];
$scope.addResource = function (settings) {
console.log(settings);
};
});
})(SampleApp || (SampleApp = {}));
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<form ng-submit="addResource(settings)">
<div class="list list-inset" ng-repeat="test in tests">
<ion-radio ng-model="settings.id" value="{{test.id}}">{{test.id}}</ion-radio>
</div>
<br/>
<div class="list" style="margin: 5px 10px;">
<label class="item item-input item-stacked-label"> <span class="input-label">Email</span>
<input type="text" ng-model="settings.email">
</label>
</div>
<button class="button button-positive">Save</button>
</form>
</ion-content>
</div>
</div>
You need to pre-initialize settings in your controller so that settings is not created inside the child scope if ng-repeat, instead it is inherited from controller scope, also use ng-value="test.id" instead of value=interpolation (value="{{test.id}}"), it binds the given expression to the value of your radio, so that when the element is selected, the ngModel of that element is set to the bound value.
var SampleApp;
(function (SampleApp) {
var app = angular.module('sampleApp', ['ionic']);
app.controller('MainCtrl', function ($scope) {
$scope.settings = {}; //Initialize model here
$scope.tests = [{
"id": "1"
}, {
"id": "2"
}, {
"id": "3"
}];
$scope.addResource = function () {
console.log($scope.settings);
};
});
})(SampleApp || (SampleApp = {}));
<link href="http://code.ionicframework.com/1.0.0-beta.6/css/ionic.css" rel="stylesheet"/>
<script src="http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js"></script>
<div>
<div ng-app="sampleApp" ng-controller="MainCtrl">
<ion-content style="display:block">
<form ng-submit="addResource()">
<div class="list list-inset" ng-repeat="test in tests">
<ion-radio ng-model="settings.id" ng-value="test.id">{{test.id}}</ion-radio>
</div>
<br/>
<div class="list" style="margin: 5px 10px;">
<label class="item item-input item-stacked-label"> <span class="input-label">Email</span>
<input type="text" ng-model="settings.email">
</label>
</div>
<button class="button button-positive">Save</button>
</form>
</ion-content>
</div>
</div>