角度的 AssureData 自定义过滤器答案

【问题标题】：AssureData custom filter in angular角度的 AssureData 自定义过滤器
【发布时间】：2019-02-16 00:44:43
【问题描述】：

如何在代码中包含自定义过滤器？

这是我的服务文件。我需要按名称过滤。我还需要在 html 中进行验证以使用原始保存和取消

app.factory('CrusdService', function($http) {
  return {
    fetchAll: function() {
      return $http.get('https:\\localHost:5000\countries').then(
        function(response) {
          return response.data.data; // depends on the response data.Sometimes it will be response.data.data.data
        },
        function(error) {
          return error;
        }
      );
    },

    add: function(data) {
      return $http.post('https:\\localHost:5000\country', data).then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    },
    update: function(data) {
      var name = {
        "name": data.name
      };
      return $http.put('https:\\localHost:5000\country' + data._id, name).then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    },
    activate: function(id) {
      return $http.put('https:\\localHost:5000\country' + id + '\activate').then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    },
    deactivate: function(id) {
      return $http.put('https:\\localHost:5000\country' + id + '\deactivate').then(
        function(response) {
          return response;
        },
        function(error) {
          console.log('error');
        }
      );
    }

  }
});

【问题讨论】：

function countryList(){CrudeService.fecthAll().then(function(data){$scope.countries=data;},function(data){console.log('error');} );} countryList();CrudeService.add($scope.country).then(function(data){countryList();},function(data){console.log('error');});CrudeService.update ($scope.country).then(function(data){countryList();},function(data){console.log('error');});CrudeService.activate(itemsId).then(function(data) {countryList();},function(data){console.log('error');});CrudeService.deactivate(itemsId).then(function(data){countryList();},function(data){console .log('error');});
不要在 cmets 中添加代码，edit 你的问题。

标签： angularjs filter

【解决方案1】：

in html file add the following content:

For the search field give the ng-model="searchValue"
In ng-repeat = "data in country |.. | filter:searchValue"

app.filter("customSearch",function(){
  return function(data,search){
    var filtered = [];
            if(!!search){
              for(var i=0;i<data.length;i++){
               if(data[i].country.toLowerCase().indexOf(search) !== -1){
                  filtered.push(data[i]);
               }
              }
            }
            else{
             filtered = data;
            }
            return filtered
  }
})

【讨论】：

【解决方案2】：

In html file add the following content:

For the search field give the ng-model="searchValue"
In ng-repeat = "data in country |.. | filter:searchValue"

app.filter("customSearch",function(){
  return function(data,search){
    var filtered = [];
            if(!!search){
              for(var i=0;i<data.length;i++){
               if(data[i].country.toLowerCase().indexOf(search) !== -1){
                  filtered.push(data[i]);
               }
              }
            }
            else{
             filtered = data;
            }
            return filtered
  }
})


in html file add the following content:
<span class="error" ng-if="formname.inputname.$invalid">enter correct data</span> //add this below the save button
for disbaling save and update button in pop up

save    - ng-disabled="formname.inputname.$invalid || formname.inputname.$pristine"  //formname is the name of the form and inputname is name of the button. if button name is not there add one.
update  - ng-disabled="formname.inputname.$invalid || formname.inputname.$pristine"
-----
 ng-model="searchString" ng-change="search(searchString)">
 $scope.search = function(searchValue) {
            $scope.list = ($filter("filter")($scope.searchList, {name: searchValue}));
        };

HTML

  <div class="form-group" ng-class="{'has-error': dataForm.country.$invalid && dataForm.country.$dirty}">
                    <input type="text" ng-model="country" name="country" class="form-control" required>
                    <span class="error text-danger" ng-show="dataForm.country.$invalid && dataForm.country.$dirty">Required</span>
                    <input type="submit" value="Submit" ng-disabled="dataForm.$invalid">
                </div>

【讨论】：