Question

我是离子帧工作的新手，javascript在我的第一个应用程序中创建功能时遇到了一些问题。我正在研究这门课程Building Aapp with Angular.js。我想探索更多，并为这个测试应用添加一些功能只是为了练习。以下是此应用Example的示例现在所有列表数据都已预先加载。我想改变它，所以只有当用户开始键入搜索字段时才会加载数据。所以我试了几个像添加id =＆＃34; search＆＃34;我的意见

<label class="item-input-wrapper">
    <i class="icon ion-search placeholder-icon"></i>
    <input id="search" type="search" ng-model="query" placeholder="Search">
  </label>

并检查输入字段，我尝试了两种不同的方法： 1）

.controller('ListController', ['$scope', '$http', '$state',
              function($scope, $http, $state) {
                   var query = document.getElementById('search');
                 if(query.value.length > 0) {
                        $http.get('js/data.json').success(function(data) {        
                     $scope.artists = data.artists;
              });
          };
    }]);

这个看起来好像不会破坏我的代码，这意味着我的标题（标题，菜单和删除按钮）是可见的。当我输入搜索字段时，数据未显示。

2）

.controller('ListController', ['$scope', '$http', '$state', '$query',
                  function($scope, $http, $state, $query) {
                     if($query.value.length > 0) {
                            $http.get('js/data.json').success(function(data) {        
                         $scope.artists = data.artists;
                  });
              };
        }]);

此示例看起来像制动我的代码我的标题不再可见它看起来它不喜欢我传递新参数$ query。如果有人可以指出我做错了什么会非常感激。谢谢你的时间。

Answer 1

您可以在没有jquery的情况下访问控制器中的ng-model，只需使用

即可

.controller('ListController', ['$scope', '$http', '$state',
  function($scope, $http, $state) {
    $scope.$watch("query.length", function(val) {
      if (val > 0) {
       $http.get('js/data.json').success(function(data) {
         $scope.artists = data.artists;
       });
      }
   });
 }
]);

仅当用户在搜索字段中键入时才使数据列表可见

1 个答案: