Question

我想知道从控制器过滤和从模型/视图中过滤的区别。我注意到，当我开始添加更多标记和样式时，从控制器完成样式时，样式变得很时髦，即包含角度元素的自举面板，不能正确调整大小。

// Controller
 $scope.array = [
     {id:1, name:'name1'},
     {id:2, name:'name2'},
     {id:3, name:'name3'},
 ];
 $scope.setFilter = function(val){
  // Filter By ID
   var filter = {};
   filter.id = val;
   $scope.myFilter = filter;
   $scope.filteredFromCon = $filter('filter')($scope.array,  $scope.myFilter, false);
 }

// Markup
  // Trigger The Filter Build
  <input ng-model="filterID" ng-change="setFilter(filterID);"/>

  <div id="method1" ng-repeat="item in array | filter:myFilter">
   {{item.name}}
  </div>

  // This Section gets Funky when adding lots more styling
  <div id="method2" ng-repeat="item in filteredFromCon">
   {{item.name}}
  </div>

我理解角度文件显示方法1方式，但我只是好奇为什么我在尝试使用方法2时失去了样式。

提前致谢，

Answer 1

我在下面从您的代码派生的示例中看不到任何差异。怎么了？

var app = angular.module('myApp', []);

app.controller('MainCtrl', function($scope, $filter) {
  $scope.array = [
    {
      id: 1, name: 'name1'
    }, 
    {
      id: 2, name: 'name2'
    }, 
    {
      id: 3, name: 'name3'
    }
  ];
  $scope.filteredFromCon = $scope.array;
  
  $scope.setFilter = function(val) {
    // Filter By ID
    var filter = {};
    filter.id = val;
    $scope.myFilter = filter;
    $scope.filteredFromCon = $filter('filter')($scope.array, $scope.myFilter, false);
  }
});

.panel {
  background-color: #88AA88 !important;
}

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <div class="container">
    <div class="form-group">
    <input ng-model="filterID" ng-change="setFilter(filterID);" />
    </div>
    <h3>method1</h3>
    <div class="panel panel-default">
      <div class="panel-heading">method1</div>
      <div class="panel-body">
        <div id="method1" ng-repeat="item in array | filter:myFilter">
        {{item.name}}
        </div>
      </div>
    </div>
    
    <hr />
    
    <h3>method2</h3>
    <div class="panel panel-default" >
      <div class="panel-heading">method2</div>
      <div class="panel-body">
        <div id="method2" ng-repeat="item in filteredFromCon">
        {{item.name}}
        </div>
      </div>
    </div>
  </div>

</body>

</html>

通过控制器与模型/视图进行AngularJS ng重复过滤

1 个答案: