In the following code, when input is empty, all the names are shown. I want no name when the input field is empty.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search.$"></label> <br>
<ul>
<li ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
Thanks
Just add a ng-if
<ul ng-if="search.$">
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search.$"></label> <br>
<ul ng-if="search.$">
<li ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
Use ng-if
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search.$"></label> <br>
<ul>
<li ng-if="search.$" ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
});
</script>
Try This Code it will help you
<script https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="namesCtrl">
<input ng-model="search"></input> <br>
<ul>
<li ng-repeat="x in names | filter : search">
{{ x }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
if ($scope.$$childHead.search == "") {
$scope.names = [];
} else {
$scope.names = [
'Jani',
'Carl',
'Margareth',
'Hege',
'Joe',
'Gustav',
'Birgit',
'Mary',
'Kai'
];
}
});
</script>
<!-- end snippet -->
Related
How can i replace multiple chars in string in ng repeat in angularjs ?
Here Is My Code and its not working.
i want to replace the #,_,. from the string.How can i replace multiple chars in string.Here Is My Code.
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li type="1" ng-repeat="x in names | filter:test">
{{ x.replace(/#|_/./g,'') }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.names = [
"Jana#ai.mkv",
'Car.l.mkv',
'Mar##gareth.mkv',
'Hege.mkv',
'Jo_e.mkv',
'G__ustav.mkv',
'Birgit.mkv',
'Mary.mkv',
'Kai.mkv'
];
});
</script>
</body>
You can use a function and apply the logic to replace the # inside the function.
DEMO
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.getText = function(obj){
return obj.replace(/#|_|\./g, '');
};
$scope.names = [
"Jana#ai.mkv",
'Car.l.mkv',
'Mar##gareth.mkv',
'Hege.mkv',
'Jo_e.mkv',
'G__ustav.mkv',
'Birgit.mkv',
'Mary.mkv',
'Kai.mkv'
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li type="1" ng-repeat="x in names | filter:test">
{{ getText(x) }}
</li>
</ul>
</div>
Correct your regex first. Looks like it should be
/#|_|\./g
Write a method inside the controller and call it inside the mustach template. For instance
angular.module('App', [])
.controller('Ctrl', function() {
var vm = this;
vm.names = [
"Jana#ai.mkv",
'Car.l.mkv',
'Mar##gareth.mkv',
'Hege.mkv',
'Jo_e.mkv',
'G__ustav.mkv',
'Birgit.mkv',
'Mary.mkv',
'Kai.mkv'
];
vm.replace = function(value) {
return value.replace(/#|_|\./g, '');
};
});
<div ng-app="App" ng-controller="Ctrl as vm">
<p>Type a letter in the input field:</p>
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in vm.names | filter: test">
{{ vm.replace(x) }}
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
I'm trying to use ui-select module in my system, I injected ui-module and ngSanitize
angular.module('app', ['ngSanitize', 'ui.select']);
And included their JS files in HTML:
<link rel="stylesheet" href="/local/mentoring/assets/ui-select/dist/select.min.css">
<script src="/local/mentoring/assets/ui-select/dist/select.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>
<div ng-controller="ctrl">
<ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
</div>
My JS:
angular.module('app')
.controller('ctrl', ['$scope', function ($scope){
$scope.itemArray = [
{id: 1, name: 'first'},
{id: 2, name: 'second'},
{id: 3, name: 'third'},
{id: 4, name: 'fourth'},
{id: 5, name: 'fifth'},
];
$scope.selectedItem = $scope.itemArray[0];
}]);
But when I'm using the directive, is reporting following error to me:
What I wrong in my code?
Update 1:
I changed angular.min.js to angular.js, then my console is reporting following error:
Try to update the ui.select version. Here is a working solution.
DEMO
var myApp = angular.module('myApp', ['ngSanitize', 'ui.select']);
myApp.controller('Controller', ['$scope',
function($scope) {
$scope.itemArray = [{
id: 1,
name: 'first'
}, {
id: 2,
name: 'second'
}, {
id: 3,
name: 'third'
}, {
id: 4,
name: 'fourth'
}, {
id: 5,
name: 'fifth'
}, ];
$scope.selectedItem = $scope.itemArray[0];
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-beta.6/angular-sanitize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.20.0/select.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="Controller">
<ui-select ng-model="selected.value">
<ui-select-match>
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="item in (itemArray | filter: $select.search) track by item.id">
<span ng-bind="item.name"></span>
</ui-select-choices>
</ui-select>
</div>
</body>
</html>
angular.js ng-repeat items with html content
I have many colleges,location and pincode details but i'm showing now by default html content .how to show list of colleges ,locations and pincodes.Can anyone show me the example in plunker
Using ng-repeat directive
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div>
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="data.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">Maturi venkata subbarao engg college</span>
<span class="md-subhead">Nadergul,Hyderabad,Telangana 501510</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
</div>
Consider you have variables in your controller as below, i.e
$scope.college_data = [{name: 'College 1', location:'Location 1', pincode:'499949'}, {name: 'College 2', location:'Location 2', pincode:'373737'}]
This is what you would do.,
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div ng-repeat="college in college_data">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{college.name}}</span>
<span class="md-subhead">{{college.location}}, {{college.pincode}}</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
Check the official document for more info. AngularJS Repeat
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.title = 'Welcome to see ng-repeat usage';
$scope.myObj = [{
college: 'Maturi',
location: 'venkata subbarao engg college',
pincode: 76003
},
{
college: 'Nadergul',
location: 'Hyderabad,Telangana',
pincode: 501510
},
{
college: 'LNCT',
location: 'bhopal',
pincode: 411001
},
{
college: 'Imperial',
location: 'Mumbai,India',
pincode: 4110008
}
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MyCtrl">
<div>
{{title}}
<div ng-repeat='obj in myObj'>
College: {{obj.college}} Location: {{obj.location}} Pincode: {{obj.pincode}}
<br />
<span>----------------------------------</span>
</div>
</div>
</body>
I have created a simple demo for you:
https://jsfiddle.net/varunsukheja/tLy451fx/
ng-repeat has syntax very similar to for loop, like
for name in nameList
similarly ng-repeat='name in nameList'
Add the ng-repeat as below,
<body ng-app="task">
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding">
<div ng-repeat="item in dataItems">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="item.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{item.Name}}</span>
<span class="md-subhead">{{item.location}}</span>
</md-card-title-text>
</md-card-title>
</div>
</md-content>
</div>
I hope It will help you.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.clg_info = [
{name: 'College 1', location:'Location 1', pincode:'499949'},
{name: 'College 2', location:'Location 2', pincode:'373737'},
{name: 'College 3', location:'Location 3', pincode:'499949'},
{name: 'College 4', location:'Location 4', pincode:'373737'}]
});
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.4/angular-material.css" />
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-repeat ="clg in clg_info">
<md-card-title layout="row" layout-align="start">
<md-checkbox md-no-ink aria-label="" ng-model="college.cb5" class="md-default">
</md-checkbox>
<md-card-title-text layout="column">
<span class="md-headline">{{clg.name}}</span>
<span class="md-subhead">{{clg.location}}, {{clg.pincode}}</span>
</md-card-title-text>
</md-card-title>
</div>
</div>
</body>
</html>
Please visit: https://docs.angularjs.org/api/ng/directive/ngRepeat
and perhaps: http://embed.plnkr.co/Rbj3pw/
http://jsfiddle.net/razh/3mwjr/
<div ng-repeat="model in collection | orderBy: 'id' as filtered_result">
{{model.name}}
</div>
The idea behind is to repeat the same html tag for all items in the collection.
I like also the | orderBy.
The pipe(|) applies to the previous object(collection). In the example we apply a orderBy 'id' to the collection. If you need to access later in your code the filtered data it is common to use the "as filteredResult", once you declared it you can access in your app.js the object filteredResult.
BTW. It is very similar to the #foreach in Laravel/ASPNET-CSHTML or the .enter() in d3js
If you want to repeat for example 10 times, in your controller define
$scope.num_of_repeat = 10;
$scope.array = {};
var i = 0;
for (i=0;i<$scope.num_of_repeat-1;i++)
{
$scope.array[i] = i;
}
in html code <span ng-repeat="arr in array" class="md-headline">Maturi venkata subbarao engg college</span>
I am using angular with angular-filter
Filtering and grouping is working. But I also want to check if the filtered list is empty, similar to this question:
AngularJS - placeholder for empty result from filter
In the sample below I use player in filteredPlayers = (players | filter:search) to access the count through filteredPlayers.length
How can I do something similar for the grouped list in the example?
Code:
var app = angular.module('myApp', ['angular.filter']);
app.controller('myCtrl', ['$scope', function($scope) {
$scope.players = [
{name: 'Gene', team: 'alpha'},
{name: 'George', team: 'beta'},
{name: 'Steve', team: 'gamma'},
{name: 'Paula', team: 'beta'},
{name: 'Scruath', team: 'gamma'}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<input type="text" ng-model="search">
<hr>
<div ng-hide="filteredPlayers.length">
This list is empty. (this is working).
</div>
<ul>
<li ng-repeat="player in filteredPlayers = (players | filter:search)">
player: {{ player.name }}
</li>
</ul>
<hr>
<div>
The list is empty. (this is not working - always displayed).
</div>
<ul ng-repeat="(key, value) in players | filter:search | groupBy: 'team'">
Group name: {{ key }}
<li ng-repeat="player in value">
player: {{ player.name }}
</li>
</ul>
</div>
</div>
You can do something similar:
<ul ng-repeat="(key, value) in (filteredPlayers = (players | filter:search) | groupBy: 'team')">
..
</ul>
<h1>Length: {{ filteredPlayers.length }}</h1>
First off new to Angular here :)
I have a page that shows a list of items from a JSON object. That Json object has an array in it of dates
$obj = [
{
id: '1',
GoalName: 'Smoke Less',
StartDate: '9/1/2015',
EndDate: '9/30/2015',
GoalType: "positive",
Category: "Health",
Weight: "3",
TimesPerWeek: 4,
Dates: {
"09/11/2015": 0,
"09/10/2015": 1,
"09/08/2015": 1
}
}
I got ng-repeat to show off the items the array, but I am struggling to understand how to control the checkboxes. When I present the items I set a date on the screen and I want to check the array to see if that date is present and if it is then check the checkbox. And additionally if the user then clicks the checkbox it updates the item. I vaguely understand that I need to make a model of the checkboxes, but don't fully understand how that works.
app.controller('TrackGoals', function ($scope) {
$scope.today = Date.today();
});
<ul class="list" id="thehabits" ng-repeat="goal in goals">
<li class="expanded-cell">
<div class="pull-right form-group cell-content">
<label>
<input type="checkbox" class="option-input checkbox" ng-model="ids[goal.dates.id].value">
</label>
</div>
<div class="cell-content">
<span id="habittext" class="title">{{ goal.GoalName }} </span>
</div>
</li>
</ul>
Try this:
var app = angular.module('myApp', []);
app.controller('TrackGoals', function($scope) {
$scope.goals = [{
id: '1',
GoalName: 'Smoke Less',
StartDate: '9/1/2015',
EndDate: '9/30/2015',
GoalType: "positive",
Category: "Health",
Weight: "3",
TimesPerWeek: 4,
Dates: {
"09/11/2015": 0,
"09/10/2015": 1,
"09/08/2015": 1
}
}, {
id: '2',
GoalName: 'Smoke Less',
StartDate: '9/1/2015',
EndDate: '9/30/2015',
GoalType: "positive",
Category: "Health",
Weight: "3",
TimesPerWeek: 4,
Dates: {}
}];
$scope.setCheckboxVal = function(val) {
var arr = [];
for (var i in val) {
if (val.hasOwnProperty(i)) {
arr.push({
date: i,
value: val[i]
});
}
}
return !!arr.length;
};
$scope.showData = function() {
console.log(JSON.stringify($scope.goals));
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Test</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body ng-controller="TrackGoals">
<ul class="list" id="thehabits" ng-repeat="goal in goals">
<li class="expanded-cell">
<div class="pull-right form-group cell-content">
<label>
<input type="checkbox" class="option-input checkbox" ng-model="goal.checkboxVal" ng-init="goal.checkboxVal=setCheckboxVal(goal.Dates)">
</label>
</div>
<div class="cell-content">
<span id="habittext" class="title">{{ goal.GoalName }} </span>
</div>
</li>
</ul>
<button type="button" ng-click="showData()">Show data</button>
</body>
</html>