<!DOCTYPE html>
<html ng-app = "myApp">
<head>
<title>First Angularjs app</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js" ></script>
</head>
<body>
<div id="content" ng-controller="MainCtrl">
<input type='text' ng-model='searchText' placeholder="Search a name like : Soheil or something " />
<ul>
<li ng-repeat='person in people | filter:searchText'> {{person.name}} </li>
</ul>
</div>
<footer class="author">
<a href="http://webpen.ir/"> Webpen </a>
</footer>
</body>
</html>
/**
* Created by soheil on 9/5/14.
*/
var app = angular.module('myApp' ,[]);
app.controller("MainCtrl", function($scope){
$scope.people = [
{
name:'Soheil'
},
{
name:'Soroush'
},
{
name:'Reza'
}
]
});
body{
background: none repeat scroll 0 0 #eee;
color: #3e3333;
font-family: fantasy;
font-size: 25px;
font-weight: 100;
margin: 0 auto;
width: 960px;
}
input,select{
width: 100%;
border: medium none;
height: 30px;
margin-top: 10px;
padding-left: 5px;
border-radius: 5px;
}
hr{
color: #eee;
}
footer{
background:#fffeee;
font-size:12px;
text-align:center;
}
footer a{
color:orange;
text-decoration:none;
}