3

ブートストラップの ui-typeahead ディレクティブのリストの作成に問題があります:

$http-call は、次の json を返します。

[{"title":"FOO", "equipment":[{"model":"Model 1"}, {"model":"Model 2"}], "combine":"true"}]

私がする必要があるのは：

  1. ユーザーがすでに入力フィールドに入力した入力にタイトル「FOO」を連結し、
  2. 機器のリストを作成します: "モデル 1" と "モデル 2" (実際のドロップダウン データ) を 2 つの個別のドロップダウン アイテムとして、または "結合" が " に設定されている場合は "モデル 1" と "モデル 2" を連結します。 true" ドロップダウン項目が 1 つだけ生成されます。

ドロップダウンの「機器」エントリの 1 つをクリックすると、選択したモデルをサービス オブジェクトに設定し、$location の url 関数を呼び出す関数を呼び出す必要があります。

これは可能ですか？

「typeahead-template-url」で使用しているテンプレートは次のとおりです。

<input typeahead="val for val in autoComplete($viewValue)"
  typeahead-template-url="searchAutocompleteTpl.html"  
  ng-model="query"/>

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: </span>
  <div ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
</script>
4

1 に答える 1

0

テンプレートを更新する必要があります。

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: {{match.model.title}}{{query}}</span>
  <div ng-show="match.model.combine=='true'" ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
  <div ng-show="match.model.combine=='false'">
    <a href="" ng-click="showItem(eqp.model)" ng-repeat="eqp in match.model.equipment">
      {{eqp.model}}
    </a>
  </div>
</script>

あなたの質問について 1 をチェックしてください<span>found in: {{match.model.title}}{{query}}</span>。モデル「クエリ」を使用すると、入力された値にアクセスして、タイトルを連結できます。

質問 2 では、さまざまな div を使用し、結合値に基づいて適切な div のみを表示しました。

私もFiddlerを作りました。

ゾリ

于 2016-02-10T16:14:23.533 に答える