防止AngularJS

Question

这个小提琴显示了一个div元素列表，它允许过滤这些div：

http://jsfiddle.net/U3pVM/18094/

如果在“过滤器项目”文本框中键入“tester1”，则可以看到此div被调整为可用的最大水平空间量。这可以防止div在发生过滤时保持其原始大小吗？

小提琴代码：

<div ng-app>
  <div ng-controller="MainCtrl">

      <label>Filter Items: <input size=10 ng-model="icon"></label>

    <table class="table table-bordered" cellspacing="1">
      <tr ng-repeat="det in dets">
        <td class="col-md-3" ng-repeat="d in det | filter:icon">
          <div class="header"><a href="{{ d.title }}" target="_blank">{{d.title}}</div>

          <div class="title truncated-anchors"><a title="d.title" href='test");'>{{d.title}}</a>
          </div>

          <div class="date">test</div>
        </td>
      </tr>
    </table>
  </div>
</div>
/* Latest compiled and minified CSS included as External Resource*/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css');
 .table-bordered {
  border: none;
}
.filter {
  /* margin-left:auto;
     margin-right:auto;
     */
  background-color: white;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  width: 200px;
  padding-left: 20px;
}
.center {
  margin-left: auto;
  margin-right: auto;
  width: 1000px;
}
table {
  border-collapse: separate;
  border-spacing: 20px;
}
td {
  /* padding: 5px 10px 5px 5px;
     */
  background-color: #F0F8FF;
}
.header {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 20px;
  padding-bottom: 5px;
  color: black;
}
.title {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}
.link {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  padding-bottom: 10px;
}
.date {
  padding-top: 10px;
  font-style: italic;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
}
.truncated-anchors {
  display: inline-block;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

function MainCtrl($scope) {

  var iconDets = new Array();
  var icon1 = new Object();
  icon1.title = "tester1";
  var icon2 = new Object();
  icon2.title = "tester2";
  var icon3 = new Object();
  icon3.title = "tester3";
  var icon4 = new Object();
  icon4.title = "tester4";
  var icon5 = new Object();
  icon5.title = "tester5";
  var icon6 = new Object();
  icon6.title = "tester6 here";
  var icon7 = new Object();
  icon7.title = "tester6 here";


  iconDets.push(icon1);
  iconDets.push(icon2);
  iconDets.push(icon3);
  iconDets.push(icon4);
  iconDets.push(icon5);
  iconDets.push(icon6);
  iconDets.push(icon7);


  var i, j, temparray = [], chunk = 3;
  for (i = 0, j = iconDets.length; i < j; i += chunk) {
    temparray.push(iconDets.slice(i, i + chunk));
  }

  $scope.dets = temparray;

  var jsonString = JSON.stringify(iconDets);

};