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>
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 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
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
Full source code can be found http://plnkr.co/edit/rQSg5eMhm9uc9dSWnWEU?p=preview
In the index.html file if I use only one controller at a time it works. That is if I use
<body>
<div id="inputExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSInputExampleController">
input example: <input type="text" ng-model="inputValue" /><br/>
This is the updated value: {{inputValue}}
</div>
</body>
or if I use
<body>
<div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
{{understandingScope}}
</div>
</body>
It will also work. However if I use both controllers at the same time such as
<body>
<div id="scopeExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSScopeExampleController">
{{understandingScope}}
</div>
<div id="inputExample" ng-app="AngularJSTestBedWebApp" ng-controller="AngularJSInputExampleController">
input example: <input type="text" ng-model="inputValue" /><br/>
This is the updated value: {{inputValue}}
</div>
</body>
The second controller never gets used. {{inputValue}} never gets assigned a default value and also never updates when you type in the text box. It literally just says "{{inputValue}}" the entire time.
I'm sure this is probably something easy but I'm very new to AngularJS. Thanks in advance for any help.
The ng-app attribute should be placed at the root of the application. In your example that would be <body/> or <html/>
<body ng-app="AngularJSTestBedWebApp">
<div id="scopeExample" ng-controller="AngularJSScopeExampleController">
{{understandingScope}}
</div>
<div id="inputExample" ng-controller="AngularJSInputExampleController">
input example: <input type="text" ng-model="inputValue" /><br/>
This is the updated value: {{inputValue}}
</div>
</body>
Updated plnkr
Here a complete example of two applications in one html page and two conrollers in one application :
<div ng-app = "myapp">
<div ng-controller = "C1" id="D1">
<h2>controller 1 in app 1 <span id="titre">{{s1.title}}</span> !</h2>
</div>
<div ng-controller = "C2" id="D2">
<h2>controller 2 in app 1 <span id="titre">{{s2.valeur}}</span> !</h2>
</div>
</div>
<script>
var A1 = angular.module("myapp", [])
A1.controller("C1", function($scope) {
$scope.s1 = {};
$scope.s1.title = "Titre 1";
});
A1.controller("C2", function($scope) {
$scope.s2 = {};
$scope.s2.valeur = "Valeur 2";
});
</script>