AngularJS - 多個Controller與Filter的運用

來來來,這次的code在這邊http://jsbin.com/oloseh/2,請自行取用

昨天我有提到一個頁面內可不可以有多個Controller,在實作上是可以的。原本的寫法是把ng-controller綁定在body上,可是如果拆出來扔到不同的div的話,就可以讓controller綁到多個div上面。

HTML

<body>
  <div id="phones" ng-controller="PhonesController">
    <input type="text" ng-model="query" /><br />
    <ul>
      <li ng-repeat="phone in phones | filter:query">
        <p>{{phone.name}}</p>
      </li>
    </ul>
  </div>
  
  <div id="phones" ng-controller="ComputersController">
    <input type="text" ng-model="query" /><br />
    <ul>
      <li ng-repeat="computer in computers | filter:query">
        <p>{{computer.name}}</p>
      </li>
    </ul>
  </div>
</body>

在段code中,我把<body ng-controller="">拿掉改為<body>,然後另外新增一個div來把ng-controller給綁在上面。

然後同樣是這段code,這次多了一個欄位叫做query,我們可以透過filter來讓這個query達到一個過濾器的效果,當你實際輸入東西的時候,它會自己進行一個匹配,這在做已知列表的搜尋上面非常好用。

Comments

comments powered by Disqus