why need to create explicite object in $scope in Angular.js
Question
i have many questions regarding Angular.js's $scope dependency injection
but first i want to show you two examples which i created,
first example : is as follows, here i am searching employees present in a table, code as follows,
<!DOCTYPE html>
<html ng-app="EmpApp">
<head>
<title>Plain Template</title>
<script type="text/javascript" src="D:/RahulShivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var empApp = angular.module("EmpApp",[]);
empApp.controller("empCtrl",function($scope){
$scope.employees = [
{
"name" : "Manoj Bhandgar",
"age" : 23,
"profession" : "Computer Engineer",
"salary" : 30000
},
{
"name" : "Ajith Murgadoss",
"age" : 33,
"profession" : "Mechanical Engineer",
"salary" : 60000
},
{
"name" : "Swati Nandgaokar",
"age" : 28,
"profession" : "Electrical Engineer",
"salary" : 45000
},
{
"name" : "Fahim Ansari",
"age" : 49,
"profession" : "Advertising",
"salary" : 90000
}
];
});
</script>
</head>
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search Employee :</td>
<td><input type="text" ng-model="query"></td>
</tr>
</table>
<hr />
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in employees | filter: query">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.profession}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</body>
Second example: Now here i am searching employee depending on the search type, code as follows,
<!DOCTYPE html>
<html ng-app="EmpApp">
<head>
<title>Plain Template</title>
<script type="text/javascript" src="D:/Rahul Shivsharan/Installers/AngularJS/angular.js"></script>
<script type="text/javascript">
var empApp = angular.module("EmpApp",[]);
empApp.controller("empCtrl",function($scope){
$scope.employees = [
{
"name" : "Manoj Bhandgar",
"age" : 23,
"profession" : "Computer Engineer",
"salary" : 30000
},
{
"name" : "Ajith Murgadoss",
"age" : 33,
"profession" : "Mechanical Engineer",
"salary" : 60000
},
{
"name" : "Swati Nandgaokar",
"age" : 28,
"profession" : "Electrical Engineer",
"salary" : 45000
},
{
"name" : "Fahim Ansari",
"age" : 49,
"profession" : "Advertising",
"salary" : 90000
}
];
$scope.prop = {};
$scope.query = {};
});
</script>
</head>
<body ng-controller="empCtrl">
<table>
<tr>
<td align="right">Search Employee :</td>
<td><input type="text" ng-model="query[prop]"></td>
</tr>
<tr>
<td align="right">Search By :</td>
<td>
<select ng-model="prop">
<option value="$">ALL</option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="profession">Profession</option>
<option value="salary">Salary</option>
</select>
</td>
</tr>
</table>
<hr />
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
<th>Salary</th>
</tr>
<tr ng-repeat="emp in employees | filter: query">
<td>{{emp.name}}</td>
<td>{{emp.age}}</td>
<td>{{emp.profession}}</td>
<td>{{emp.salary}}</td>
</tr>
</table>
</body>
In above both of the case i have some questions,
in First example I have created "query" as a ng-model but not explicitly added to $scope, why ?
but in second example i have added "query" and "prop" in my $scope, why ?
and in both the case filter: query not filter: query[prop], why ?
i understand that prop is used for holding the value "name", .. etc, and the query.name or query.salary should be the case, but than how its working beneath the angular.js code.
i want a good explanation
1 answers
solution1
0 ACCPTED 2013-10-31 12:00:21
Angular will automatically create (link) $scope properties if it finds them in markup when compiling.
So, in your first example, ng-model on the input is set to query . query will automatically be added to the scope. So, it is not necessary to add it explicitly. However, adding it explicitly is fine (if you want to). But, you would probably just initialize it to null, so there isn't much value (unless you have a value to bind in).
In the second example, it is using a feature of filter :
Object: A pattern object can be used to filter specific properties on objects contained by array. For example {name:"M", phone:"1"} predicate will return an array of items which have property name containing "M" and property phone containing "1". A special property name $ can be used (as in {$:"text"}) to accept a match against any property of the object. That's equivalent to the simple substring match with a string as described above.
So, it is necessary to initialize query as an object. Then, inside the markup, using this query[prop] is dynamically adding a property named that is the value of prop to the query object. This allows the filter to look like { valueOfProp: "inputValue"} . If you try to dynamically add a property to query in the second example, without initialization, the object will be undefined and fail. Hence, we must initialize at least to an empty object.
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.