Question

我需要在我的应用程序中使用自定义指令，但我需要使用自定义指令更改现有代码。我已经使用了所有内置指令。以下是使用内置指令的代码 -

HTML code：

<!DOCTYPE html>
<html>

  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>  
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>  

    <div ng-app="mainApp" ng-controller="MyController"> 
    <form >
        <table>  
            <tr>  
                <td>Id: </td>  
                <td>  
                    <span>{{ EmpModel.Id }}</span></td>  
            </tr>  
            <tr>  
                <td>Name:</td>  
                <td>  
                    <input type="text" data-ng-model="EmpModel.Name" /></td>  
            </tr>  
            <tr>  
                <td>Birthdate:</td>  
                <td>  
                    <input type="date" data-ng-model="EmpModel.Dob" /></td>  
            </tr>  
                <tr>  
                <td>Address:</td>  
                <td>  
                    <input type="text" data-ng-model="EmpModel.Address" /></td>  
            </tr> 
                <tr>  
                <td>Contact:</td>  
                <td>  
                    <input type="number" data-ng-model="EmpModel.Contact" /></td>  
            </tr> 

            <tr>  
                <td>EmailId:</td>  
                <td>  
                    <input type="email" data-ng-model="EmpModel.Email" /></td>  
            </tr> 
            <tr>  

                <td>  
                    <input type="button" ng-click= " AddData()" value="Save Data"/></td> 
                    <td><input type="button" ng-click= " AddData()" value="Update"/></td>
            </tr>  
        </table> 
        </form>
     <table border= 1>  
           <thead>  
               <th>Id</th>  
               <th>Name</th>  
               <th>Birthdate</th> 
                    <th>Address</th> 
                     <th>Contact</th> 
                     <th>Email</th>

           </thead>  
           <tr data-ng-repeat="Emp in EmpList">  
               <td ng-bind = "Emp.Id"></td>  
               <td ng-bind = "Emp.Name"></td>  
               <td ng-bind = "Emp.Birthdate"></td>
                   <td ng-bind ="Emp.Address"></td>
                   <td ng-bind = "Emp.Contact"></td>
                   <td ng-bind = "Emp.Email" ></td>

        <th><input type="button" ng-click= "removeItem()" value="Remove" /></th>
        <th><input type="button" ng-click= "editItem(i)" value="Edit" /></th>
           </tr>  
       </table>  
    </div>    
</body>  

</html>

JS代码：

var app = angular.module("mainApp", []);  
       app.controller('MyController', function ($scope) {  

           $scope.EmpModel = {  

               Birthdate: 0,  
               Name: '', 
           Address: '',
           Contact: '', 
           Email: '',
           };  
           console.log($scope.EmpModel);
           $scope.EmpList = [];  
           $scope.AddData = function () {  
               var _emp = {  
                   Id: $scope.EmpList.length + 1,  
                   Name: $scope.EmpModel.Name,  
           Birthdate: $scope.EmpModel.Dob,
           Address: $scope.EmpModel.Address,
           Contact: $scope.EmpModel.Contact, 
           Email: $scope.EmpModel.Email
               };  
               $scope.EmpList.push(_emp);  
               ClearModel();  
           }  

           function ClearModel() {  
                $scope.EmpModel.Id = 0;  
                $scope.EmpModel.Name = '';  
                $scope.EmpModel.Dob = ''; 
                    $scope.EmpModel.Address = '';
                    $scope.EmpModel.Contact = ''; 
                    $scope.EmpModel.Email = '';
           } 


    $scope.removeItem = function (index) {
              console.error("rrrrrrrr");

            console.log(index);
            $scope.EmpList.splice(index, 1)
        } 

        $scope.editItem = function(id) {
                console.error("errrroooooorrr")
                for (i in $scope.EmpList) {
                    console.log($scope.EmpList);
                    if ($scope.EmpList[i].id == id) {
                        $scope.EmpModel = angular.copy($scope.EmpList[i]);
                        $scope.EmpList.splice(id,1);
                        //$scope.EmpList[0].id =id;
                        EmpList.splice(id, 1);
                    }
                }

        }

       });

在angularjs中使用自定义指令

0 个答案: