Question

我正在从SQL表中检索数据并将其显示在html表中，当我单击此表中的一行时，值将显示在输入文本中以编辑/删除它们。我制作了一个角度滤镜，但它不起作用，输入文本被禁用。在应用“selectedMember”方法清除输入文本之前，它正在工作。任何想法如何解决这个问题，提前谢谢

HTML是：

<body ng-app="ContractT" ng-controller="crudController">
   <br /><br />
   <form >
      <input type="checkbox" ng-model="Hide" />Hide <input type="button" value="Clear" ng-click="resetform()" />
      <input type="submit" value="Save" ng-click="save()"/> <input type="button" value="Delete" ng-click="delete(selectedMember.sys_key)" />
      <fieldset>
         <legend>Contract Type</legend>
         <table>
            <tr>
               <td>Code</td>
               <td><input type="text" size="10" pattern="^[a-zA-Z0-9]+$" title="Alphnumeric" required autofocus ng-model="selectedMember.Code.Staff_Type_Code">
                  <input type="text" size="10" hidden ng-model="selectedMember.sys_key" /> 
               </td>
            </tr>
            <tr>
               <td>Latin Description</td>
               <td><input type="text" required size="35" ng-model="selectedMember.Latin.L_Desc"></td>
            </tr>
            <tr>
               <td>Local Description</td>
               <td><input type="text" required size="35" ng-model="selectedMember.Local.A_Desc"></td>
            </tr>
            <tr>
               <td>No. Of Houres Per Day</td>
               <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Hours_Day"></td>
            </tr>
            <tr>
               <td>No. Of Days Per Week(s)</td>
               <td><input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Days_Week"></td>
            </tr>
            <tr>
               <td>End Of Contract By</td>
               <td>
                  <select>
                     <option ng-model="Age">Age</option>
                     <option ng-model="NYears">Number Of Years in Service</option>
                  </select>
               </td>
            </tr>
            <tr>
               <td>Number</td>
               <td>
                  <input type="text" pattern="^[0-9]+$" title="Please enter numbers only" size="10" maxlength="2" ng-model="selectedMember.Num_EndWork">
                  <select>
                     <option ng-model="Months">Months</option>
                     <option ng-model="Years">Years</option>
                  </select>
               </td>
            </tr>
         </table>
      </fieldset>
      <br />
      <table border="1" ng-hide="Hide">
         <thead>
            <tr>
               <!--<th>syskey</th>-->
               <th>Code</th>
               <th>Latin Description</th>
               <th>Local Description</th>
               <th>Hours_Day</th>
               <th>Days_Week</th>
               <th>Num_EndWork</th>
            </tr>
         </thead>
         <tbody>
            <tr ng-repeat="c in Contracts | filter:Code | filter:Latin | filter:Local ">
               <td style="display:none;"><a href="#" ng-click="showInEdit(c)">{{c.sys_key}}</a></td>
               <td><a href="#" ng-click="showInEdit(c)">{{c.Staff_Type_Code}}</a></td>
               <td><a href="#" ng-click="showInEdit(c)">{{c.L_Desc}}</a></td>
               <td><a href="#" ng-click="showInEdit(c)">{{c.A_Desc}}</a></td>
               <td><a href="#" ng-click="showInEdit(c)">{{c.Hours_Day}}</a></td>
               <td><a href="#" ng-click="showInEdit(c)">{{c.Days_Week}}</a></td>
               <td><a href="#" ng-click="showInEdit(c)">{{c.Num_EndWork}}</a></td>
            </tr>
         </tbody>
      </table>
   </form>
</body>

控制器是：

    contractT.controller('crudController', function($scope, crudService) {

        loadrecords();

        function loadrecords() {
            crudService.getContracts().then(function(response) {
                $scope.Contracts = (response.data);
                console.log($scope.Contracts);
            });
        }

        $scope.resetform = function() {
            $scope.selectedMember = {};
            //$scope.selectedMember = {};
            //$scope.Local = {};
            //$scope.Nhd = null;
            //$scope.Ndw = null;
            //$scope.Num = null;
        }

        $scope.selectedMember = {
            Code: "",
            sys_key: "",
            Latin: "",
            Local: "",
            Hours_Day: "",
            Days_Week: "",
            Num_EndWork: ""
        }

        $scope.showInEdit = function(member) {
            $scope.selectedMember = member;
            $scope.selectedMember.Code = member;
            $scope.selectedMember.Latin = member;
            $scope.selectedMember.Local = member;
            //$scope.selectedMember.Hours_Day = member;
            //$scope.selectedMember.Days_Week = member;
            //$scope.selectedMember.Num_EndWork = member;
        }

        $scope.delete = function(sys_key) {
            if ($scope.selectedMember.sys_key = {})
                alert("Please select a valid values");

            else if (confirm("Are you sure want to delete?")) {
                var promiseGetSingle = crudService.delete(sys_key);

                promiseGetSingle.then(function(pl) {
                        $scope.OneContract = pl.data;

                        $scope.selectedMember = {};
                        alert("Deleted Successfully");
                        loadrecords();
                    },
                    function(errorPl) {
                        console.log('failure deleteing Contract', errorPl);
                    });
            }
        }
    });

Answer 1

<tr ng-repeat="c in Contracts | filter:selectedMember.Code | filter:selectedMember.Latin | filter:selectedMember.Local ">

Angularjs过滤器不使用方法

1 个答案: