过滤列表空答案

【问题标题】：Filtering list Empty过滤列表空
【发布时间】：2018-05-08 07:05:42
【问题描述】：

我的 JSON 数据是来自数据库的，我将它从对象转换为 JSON。所以值如下：

[{
    "StoreName": "Flipkart"
}, {
    "StoreName": "Amazon"
}, {
    "StoreName": "Snapdeal"
}, {
    "StoreName": "Jabong"
}, {
    "StoreName": "Trendin"
}, {
    "StoreName": "Lenskart"
}, {
    "StoreName": "Zovi"
}, {
    "StoreName": "BabyOye"
}, {
    "StoreName": "ShopMore24"
}, {
    "StoreName": "BasicsLife"
}, {
    "StoreName": "PrettySecrets"
}, {
    "StoreName": "American Swan"
}, {
    "StoreName": "ShopClues"
}, {
    "StoreName": "FernsNPetals"
}, {
    "StoreName": "Pepperfry"
}, {
    "StoreName": "Koovs"
}, {
    "StoreName": "FoodPanda"
}, {
    "StoreName": "BookmyFlower"
}, {
    "StoreName": "Printvenue"
}, {
    "StoreName": "Amar Chitra Katha"
}, {
    "StoreName": "Booking"
}, {
    "StoreName": "TicketGoose"
}, {
    "StoreName": "Myntra"
}, {
    "StoreName": "FirstCry"
}, {
    "StoreName": "Archies Online"
}, {
    "StoreName": "Dominos"
}, {
    "StoreName": "Bewakoof"
}, {
    "StoreName": "Healthkart"
}, {
    "StoreName": "Zivame"
}]

我的 Angular js 代码是这样的：

angular.module('app', [])
 .controller('Controller', function($scope,$filter) {
$scope.obj = {};
$scope.obj.showList = false;

$scope.Getallitem = function() {
  $scope.Store = angular.toJson(data)
}
$scope.Getallitem();    

$scope.SelectedValue = function(item) {
  $scope.obj.showList = false;
  $scope.obj.sname = item;
}

 $scope.open = function(index) {
  var filteredContent =  $filter('filter')($scope.Store,$scope.obj.sname);
  if(typeof  filteredContent[index] !== 'undefined'){
    var StoreName = filteredContent[index];
    $scope.SelectedValue(StoreName);  
  }
}    

$scope.focusIndex = -1;
$scope.keys = [];
$scope.keys.push({
  code: 13,
  action: function() {
    $scope.open($scope.focusIndex);
  }
});
$scope.keys.push({
  code: 38,
  action: function() {
    $scope.focusIndex--;
  }
});
$scope.keys.push({
  code: 40,
  action: function() {
    $scope.focusIndex++;
  }
});
$scope.$watch('obj.sname', function() {
  if(!$scope.obj.showList){      
     $scope.focusIndex = -1;
    }
});
$scope.$on('keydown', function(msg, obj) {

  var code = obj.code;
   if(code != 40 && code != 38 && code != 13){
      $scope.obj.showList = true;
   }
  var filteredContent =  $filter('filter')($scope.Store,$scope.obj.sname);
  $scope.keys.forEach(function(o) {
    if (o.code !== code) {
      return;
    }
    if(code == 40){

     if (($scope.focusIndex + 1) >= filteredContent.length) {
        return;
      }
     }else if(code == 38){   

     if ($scope.focusIndex <= 0) {
        return;
      }
     }
    o.action();
    $scope.$apply();
  });
});
})

 .directive('keyTrap', function() {
return function(scope, elem) {
  elem.bind('keydown', function(event) {
    if(event.keyCode == 40 || event.keyCode == 38 || event.keyCode == 13){
      event.preventDefault();
    }
    scope.$broadcast('keydown', {
      code: event.keyCode
    });
  });
};
});

HTML 的代码是这样的：

<body ng-app="app" key-trap>
    <div ng-controller="Controller">
        <input type="text" class="myInput form-control" name="txtStorename" id="txtStorename" placeholder="Search for Store.." title="Type in a Store" data-error-message="Please enter StoreName" ng-model="obj.sname">
        <ul ng-if="obj.sname && obj.showList" id="myUL" ng-repeat="StoreList in Store| filter:obj.sname">
            <li class="record" ng-class="($index == focusIndex)?'record-highlight':''" ng-cloak ng-click="SelectedValue(StoreList.StoreName)">{{StoreList.StoreName}}</li>
        </ul>
        <div ng-show="(Store|filter:obj.sname).length==0" style="color:red;font-weight:bold" ng-cloak>No Result Found</div>
    </div>
</body>

这里的问题是我只得到 NO RECORD Found div。该列表作为空值上升到 ng-repeat。所以我过滤时没有显示列表。

【问题讨论】：

标签： javascript c# jquery angularjs asp.net-mvc

【解决方案1】：

obj.sname 和 obj.showList 两个变量都没有得到正确的值来允许显示列表。

请尝试删除

ng-if="obj.sname && obj.showList"

如果可行，请找出 obj.sname 和 obj.showList 有什么问题。

Working fiddle

希望有帮助！

【讨论】：