Angular: need search bar working on 2 different ng-repeat - javascript

I am using Ionic/Angular.
I have a search bar which I need to have it working in 2 different scenarios BUT at the same time. Look:
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!--here is the ng-model query-->
<input type="search" placeholder="Search" ng-model="query">
</label>
<!--here is the 1st filter:query-->
<div ng-repeat="sport in sports | filter:query" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<!--here is the 2nd filter:query-->
<div class="item item-button-right"
ng-repeat="league in sport.leagues | filter:query"
on-tap="goToLines(league)">
{{league.name}}
</div>
so, all I need is that when the user is searching for something, the search bar returns sport.name and league.name, is it clear for you guys?
UPDATE*
this is the service where I am calling sports:
getSports: function(agent) {
var defer = $q.defer();
LocalForageFactory.retrieve(CONSTANT_VARS.LOCALFORAGE_SPORTS)
.then(function(sports) {
if (!_.isNull(sports)) {
defer.resolve(_.values(sports));
}else {
$http.get(CONSTANT_VARS.BACKEND_URL + '/lines/sports/' + agent)
.success(function(sports) {
//forcing array instead of object
sports = _.values(sports);
sports = _.sortBy(sports, function(sport) {
return sport.priority;
});
LocalForageFactory.set(CONSTANT_VARS.LOCALFORAGE_SPORTS, sports);
defer.resolve(sports);
})
.error(function(err) {
defer.reject(err);
});
}
});
return defer.promise;
},

If you wanted to search either field, drop the second filter and use the special $ to traverse the object hierarchy. See the documentation for more info.
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.sports = [
{name: 'Basketball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
{name: 'Volleyball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
{name: 'test', leagues: [{name: 'test'}]}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
<input type="search" placeholder="Search" ng-model="query">
<div ng-repeat="sport in sports | filter:{$: query}" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<div class="item item-button-right"
ng-repeat="league in sport.leagues"
on-tap="goToLines(league)">
{{league.name}}
</div>
</div>
</div>

Related

Filtering in Angular JS

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.

First checkbox should be checked in ng-repeat if button clicked

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;
}

AngularJS the scope value does not display in the views

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.

how to create object while using ng-repeat and array in angularjs

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>

how to get radio input value using Ionic and AngularJS?

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>

Categories