0

すべて：

AngularJSにタグ（特にカスタムタグ）を動的に追加する方法はありますか？

最近作成された次のタイプのカスタムタグがあります。

<mytag type="small" />

これをより大きな<div>要素で管理しようとしています。私がやりたいのは、div要素内にボタンを配置することです。このボタンを押すと、div内に新しいmytag要素が作成されます。

言い換えれば、最初のページ構成が与えられた場合：

<div ng-controller="tagControl">
   <div id="tagdiv">
      <mytag type="small" />
   </div>
   <div id="Controls">
      <button ng-click="addTag()">Add New Tag</button>
      <button ng-click="clearTags()">Clear All Tags</button>
   </div>
</div>

「新しいタグの追加」ボタンが押されるたびに新しいmytagタグを追加するtagControlのaddTag（）関数に何かを入れたいのですが、追加されたすべてのタグを削除するclearTags（）関数に何かを入れたいのです。 「すべてのタグをクリア」ボタンが押されました。

これはAngularJSを使用して可能ですか？そうでない場合は、サードパーティのライブラリを使用して実行できますか？どちらの場合でも、これはどのように行うことができますか？

洞察を事前に感謝します...

4

1 に答える 1

3

DOM 操作ではなく、MVC の観点から考える必要があります。<mytag>表示したい の数は、モデル内の何かによって駆動される必要があります。そして、HTML は次のようになります。

<div ng-controller="tagControl">
  <div id="tagdiv">
     <mytag type="small" ng-repeat="foo in items" />
  </div>
  <div id="Controls">
     <button ng-click="addTag()">Add New Tag</button>
     <button ng-click="clearTags()">Clear All Tags</button>
  </div>
</div>

その後、addTag() メソッドはitemsモデルに追加するだけで、clearTags() はリストをクリアします。モデルを更新すると、Angular がタグを追加します。

于 2012-10-25T16:58:18.167 に答える