I'm pretty much new to AngularJS. In fact, this is my first day. What I'm trying to do here is to fetch data from a controller I made and show it in the view. But I don't know why, it's not simply working.
My data is a list of students. All I'm trying to do is to show the list of students in a list order and filter the list according to the name entered in a textbox.
My code is pretty simple:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
</head>
<body>
<h1>Hello!</h1>
Student Name:
<br />
<input type="text" ng-model="sname" /> {{ sname }}
<div id="mvvm_communication" class="container" data-ng-controller="simpleController">
<ul>
<li ng-repeat="stud in students | filter:sname | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
</ul>
</div>
<script>
function simpleController($scope)
{
$scope.students=[
{firstname:'Jordan',lastname:'Rains'},
{firstname:'Michael',lastname:'Jordan'},
{firstname:'John',lastname:'Doe'},
{firstname:'John',lastname:'Smith'},
{firstname:'Simcha',lastname:'Michelle'},
{firstname:'Sydney',lastname:'Rivers'},
{firstname:'Summer',lastname:'Rose'},
{firstname:'Georgia',lastname:'Schubert'},
{firstname:'Rosalie',lastname:'Fayadh'}
];
}
</script>
</body>
</html>
Here's a fiddle.
You need to register your controller!
var myApp = angular.module('myApp',[]);
myApp.controller('simpleController', ['$scope', simpleController]);
And then you also need to put a name into ng-app.
<html ng-app="myApp">
I've updated your JSFiddle:
HTML:
<div ng-app="app">
<div ng-controller="simpleController">
<h1>Hello Student!</h1> Student Name:<br/>
<input type="text" ng-model="sname" /> {{ sname }}
<div id="mvvm_communication" class="container">
<ul>
<li ng-repeat="stud in students | filter:sname | orderBy:'firstname'" >{{stud.firstname | lowercase }}, {{stud.lastname| uppercase }}</li>
</ul>
</div>
</div>
</div>
Angular:
var app = angular.module('app', []);
app.controller('simpleController', function($scope) {
$scope.students=[
{firstname:'Jordan',lastname:'Rains'},
{firstname:'Michael',lastname:'Jordan'},
{firstname:'John',lastname:'Doe'},
{firstname:'John',lastname:'Smith'},
{firstname:'Simcha',lastname:'Michelle'},
{firstname:'Sydney',lastname:'Rivers'},
{firstname:'Summer',lastname:'Rose'},
{firstname:'Georgia',lastname:'Schubert'},
{firstname:'Rosalie',lastname:'Fayadh'}
];
});
you need to define an angular module:
angular.module('app', []).controller('simpleController', simpleController);
see jsFiddle
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>
Get 2 json files from backend , and need to mix it !
First ng-repeat:
<p ng-repeat="category in categories track by category.id" >
{{ category }}
</p>
result
{"id":"Category-1"}
{"id":"Category-2"}
{"id":"Category-3"}
Second ng-repeat:
<p ng-repeat="game in gamesList track by game.id">
{{ game }}
</p>
result
{"Category-id":"1","title":"Game-1"}
{"Category-id":"1","title":"Game-2"}
{"Category-id":"2","title":"Game-3"}
{"Category-id":"3","title":"Game-4"}
{"Category-id":"3","title":"Game-5"}
I need to mix this 2 values and get something like this:
Category-1
Game-1
Game-2
Category-2
Game-3
Category-3
Game-4
Game-5
You do not have to mix both json, you can just use the 2nd json and use GroupBy Filter
DEMO
angular.module('datepickerBasicUsage', ['angular.filter'])
.controller('AppCtrl', function ($scope) {
$scope.gamesList = [{"Categoryid":"1","title":"Game-1"},
{"Categoryid":"1","title":"Game-2"},
{"Categoryid":"2","title":"Game-3"},
{"Categoryid":"3","title":"Game-4"},
{"Categoryid":"3","title":"Game-5"}];
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" style='padding: 40px;'>
<ul ng-repeat="(key, value) in gamesList | groupBy: 'Categoryid'">
<h3> Category: {{ key }} </h3>
<li ng-repeat="player in value">
{{ player.title }}
</li>
</ul>
</div>
</body>
</html>
I am new in AngularJS but I have basic HTML and JavaScript knowledge.
I have a list of links on page, and a search box. I want to filter list elements dynamically according to the text typed in the box. I have found some example but they use external lists- not a list typed on same html file.
Exactly this: https://code.ciphertrick.com/demo/angularajaxsearch/
As you guess I cannot make filtered elements visible/unvisible like this. How can I filter them (all html codes must be in 1 page so we cannot call another js file, controller or etc.)
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<div class="bar">
<input type="text" class="search" ng-model="searchString" />
</div>
<ul class="data-ctrl">
<li ng-repeat="i in berkay | searchFor:searchString">
</li>
</ul>
<ul name="berkay">
<li>google</li>
<li>bbc</li>
<li>microsoft</li>
</ul>
</body>
</html>
Note: If there is a way with just Javascript or etc. without using angular js, it is welcome as well.
Last Edit: All 3 answers are correct and working fine right now.
Could you try this. I hope it works for you :)
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $filter) {
$scope.searchString=[{Text:"https://google.com"},{Text:"https://bbc.com"},{Text:"https://microsoft.com"}];
$scope.searchString2=$scope.searchString;
$scope.$watch('search', function(val)
{
$scope.searchString= $filter('filter')($scope.searchString2, val);
});
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="bar">
<input type="text" class="search" ng-model="search" />
</div>
<ul>
<li ng-repeat="item in searchString">
<a href="{{item.Text}}">{{item.Text}}</>
</li>
</ul>
</div>
</body>
</html>
Please check this updated answer. It will redirect when you click on it.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
$scope.berkay = [{
name: "google",
link: 'https://google.com'
}, {
name: "bbc",
link: 'https://bbc.com'
}, {
name: "microsoft",
link: 'https://microsoft.com'
}];
});
</script>
<div ng-app="app" ng-controller="myCtrl">
<div class="bar">
<!--
1. If you want to search everything(both link and name), just use searchString
<input type="text" class="search" ng-model="searchString">
2. If you want to search only name change searchString to searchString.name
<input type="text" class="search" ng-model="searchString.name">
3. If you want to search only link change searchString to searchString.link
<input type="text" class="search" ng-model="searchString.link">
-->
<input type="text" class="search" ng-model="searchString" />
</div>
<ul class="data-ctrl">
<li ng-repeat="i in berkay | filter:searchString">
{{i.name}}
</li>
</ul>
</div>
You can add javascript inside HTML itself
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script>
var app = angular.module("app", []);
app.controller("myCtrl", function($scope) {
$scope.berkay = [{
name: "google",
link: 'https://google.com'
}, {
name: "bbc",
link: 'https://bbc.com'
}, {
name: "microsoft",
link: 'https://microsoft.com'
}];
});
</script>
<div ng-app="app" ng-controller="myCtrl">
<div class="bar">
<!--
1. If you want to search everything(both link and name), just use searchString
<input type="text" class="search" ng-model="searchString">
2. If you want to search only name change searchString to searchString.name
<input type="text" class="search" ng-model="searchString.name">
3. If you want to search only link change searchString to searchString.link
<input type="text" class="search" ng-model="searchString.link">
-->
<input type="text" class="search" ng-model="searchString" />
</div>
<ul class="data-ctrl">
<li ng-repeat="i in berkay | filter:searchString">
{{i.name}}
</li>
</ul>
</div>
I have just started to learn AngularJS.
I am trying to write this code with 3 files index.html and view1.html and view2.html . In index.html I have defined the module and controller function.In the controller 'sc' i have javascript object array with 2 fields name and city harcoded. I have used the router functionality to add a new view which will be used to search by the user and i have also added a button to dynamically insert a new pair of values into the object array.
But i am unable to print the name and city values in the view1 and view2. I am sure there is some problem with the scope but i am unable to find the error.
Below is the index.html file code.
<html ng-app="demo" >
<head>
<title>AngularStuff!!!</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<!-- <div ng-controller='sc'>
</div>-->
<div ng-controller="sc">
<div ng-view=" "></div>
</div>
<script>
var demo=angular.module('demo',['ngRoute']);
demo.controller('sc',function($scope){
$scope.customers=[
{name:'Johnny',city:'ab'},
{name:'Jane',city:'ab'},
{name:'Apple',city:'tv'},
{name:'Clarice',city:'ku'},
{name:'Clayton',city:'lm'}
];
$scope.add=function()
{
$scope.customers.push({name:$scope.n.name,city:$scope.n.city}) ;
};
}
);
demo.config(
function($routeProvider)
{
$routeProvider
.when('/',
{
controller:'sc',
templateUrl:'View1.html'
}
)
.when('/View2',
{
controller:'sc',
templateUrl:'View2.html'
}
)
.otherwise({redirectTo:'/'});
}
);
</script>
</body>
</html>
Below is the view1.html File Code
<div >
<h2 align="center">View1</h2>
Name:
<input type="text" ng-model="filter.name"/>
<ul>
<li ng-repeat="cust in cutomers|filter:filter.name">
{{cust.name}}--{{cust.city}}
</li>
</ul>
Customer Name:
<input type="text" ng-model="n.name"/>
<br/>
Customer City:
<input type="text" ng-model="n.city"/>
<br/>
<button ng-click="add()">Add Customer</button>
View2
</div>
Below is the view2.html
<div >
<h2 align="center">View1</h2>
Name:
<input type="text" ng-model="filter.name"/>
<ul>
<li ng-repeat="cust in cutomers|filter:filter.name">
{{cust.name}}--{{cust.city}}
</li>
</ul>
Customer Name:
<input type="text" ng-model="n.name"/>
<br/>
Customer City:
<input type="text" ng-model="n.city"/>
<br/>
<button ng-click="add()">Add Customer</button>
View2
</div>
The views are loading properly but the values are not getting displayed.
<ul>
<li ng-repeat="cust in customers | filter:cust.name">
{{cust.name}} {{cust.city}}
</li>
</ul>
Here is a working plunker
I've the following simple Angular JS trail, which contains the basic CRUD operations:
<html>
<head>
<title>CRUD</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body>
<div ng-app>
Simple Expression Evaluator:<br/>
<input ng-model="calculator"/><br/>
{{calculator + "=" + $eval(calculator)}}
</div>
<h3>CRUD - Comments</h3>
<div ng-app="commentapp">
<ul ng-controller="commentController">
<li ng-repeat="user in users">
{{user.name}} wrote "{{user.comment}}"
<br/>Delete
Edit
</li>
<li>
<input id="name" ng-model="current.name" value="{{current.name}}" />
<input id="name" ng-model="current.comment" value="{{current.comment}}" />
</li>
<li>
<button ng-click="save(current)">
Save
</button>
<button ng-click="addNew(current)">
Add New User
</button>
</li>
</ul>
</div>
<script>
var app = angular.module("commentapp", []);
app.controller("commentController", function($scope) {
$scope.users = [{
"name": "Qwe",
"comment": "Great!"
}];
$scope.current = {};
$scope.addNew = function(user) {
$scope.users.push(user);
};
$scope.edit = function(user) {
$scope.current = user;
};
$scope.save = function(user) {
$scope.current = {};
};
$scope.remove = function(user) {
var index = $scope.users.indexOf(user);
$scope.users.splice(index, 1);
};
});
</script>
</body>
</html>
However the output shows:
So, the expression evaluator works perfectly, which means Angular JS is tied up correctly. But the rest of the components don't work at all. Instead of Qwe, I get the expression {{user.name}}. What am I doing wrong here?
Hi I tried your script and seem working when I remove the first ng-app
nov the html part is like this
<h3>CRUD - Comments</h3>
<div ng-app="commentapp">
<ul ng-controller="commentController">
<li ng-repeat="user in users">
{{user.name}} wrote "{{user.comment}}"
<br/>Delete
Edit
</li>
<li>
<input id="name" ng-model="current.name" value="{{current.name}}" />
<input id="name" ng-model="current.comment" value="{{current.comment}}" />
</li>
<li>
<button ng-click="save(current)">
Save
</button>
<button ng-click="addNew(current)">
Add New User
</button>
</li>
</ul>
</div>
look at this fiddle
hope this help