0

Angular.js の $scope 依存性注入に関して多くの質問があります

最初に、私が作成した 2 つの例をお見せしたいと思います。

最初の例：次のとおりです。ここでは、テーブルに存在する従業員を検索しています。コードは次のとおりです。

<!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>

2 番目の例: ここでは、検索タイプに応じて従業員を検索しています。コードは次のとおりです。

<!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>

上記の両方のケースで、いくつか質問がありますが、

最初の例では、「クエリ」を ng-model として作成しましたが、明示的に $scope に追加していません。なぜですか?

しかし、2 番目の例では、$scope に「query」と「prop」を追加しました。なぜですか?

どちらの場合も、filter: query ではなく filter: query[prop]、なぜですか?

propは値「name」などを保持するために使用され、query.nameまたはquery.salaryがそうである必要があることを理解していますが、angular.jsコードの下でどのように機能するかよりも.

ちゃんとした説明が欲しい

4

1 に答える 1