どのように出力ボタングループ内の変数をAngular.jsとHTML

Question

のドロップダウン結果に影響を与えるこれは、これまで私の仕事です：dataCtrlは、ランニングに必要なすべてのデータをモデルにもたらし

<div class="container" ng-app="app" ng-controller="dataCtrl"> 
    <h2>Test</h2> 

    <h4>Select Category</h4> 
    <ul class="nav nav-pills"> 
     <li ng-repeat="categories in model"> 
      <a data-toggle="pill" href="">{{categories.catName}}</a> 
     </li> 
    </ul> 

    <h4>Select Trend</h4> 
    <select class="form-control" id="trendID" ng-repeat="categories in model"> 
     <option ng-repeat="trends in categories.trends">{{trends.trendName}}</option> 
    </select> 
</div> 

この小さなテストプログラム。私は、{{model | json}}とデータが表示されているので、データが正常であることがわかります。

[カテゴリ]のすべてのボタンは、ドロップダウンメニューと同様に正しくラベル付けされています。

私の意図は、ドロップダウンメニューが表示されますカテゴリを選択するユーザーのためである（私はこれを達成するためにNG-場合に使用する予定）。しかし、私はボタンから値を取得することにいくつかの困難を抱えています。私は試しました：

ng-click="{{categories.catID}}" 

しかし、それは動作しません。私はまた、新しいコントローラを構築しようとしましたが、それは全体を崩壊させ続けます。私はこれに助けを要請しています。彼らは見た目は似ていますが、私がそれらを適用するとき、彼らはうまくいかないようです。

現在、「app.js」にはdataCtrlを含む2つの機能しているコントローラがありますので、エラーなしですべてをやっています。ボタンコントローラーを追加しようとするときだけ、全体が崩れます。

誰かが私にこのことを教えてくれるだけで、やり方を説明することができれば分かります。

ありがとうございます。

Answer 1

要約すると、どのカテゴリが選択されているかに基づいてドロップダウンリストをフィルタリングすることです。したがって、選択した値を格納する場所が必要です。選択した値を取得したら、ピルボタンで設定します。最後に、ng-ifを使って表示する項目を制御できます。

dataCtrl：

$scope.selectedCategoryId = null; 

丸薬ボタン：

<a data-toggle="pill" href="" ng-click="selectedCategoryId = categories.catID">{{categories.catName}}</a> 

ドロップダウン：

<select class="form-control" id="trendID" ng-repeat="categories in model" ng-if="categories.catID == selectedCategoryId"> 
    <option ng-repeat="trends in categories.trends">{{trends.trendName}}</option> 
</select> 

Answer 2

HTML：

<h2>Test</h2> 
<section title="UserInput" ng-controller="evPotCatBtnCtrl as formState"> 

    <h4>Select Category</h4> 
    <ul class="nav nav-pills"> 
     <li ng-repeat="item in model" ng-class="{'active':rowIndex == $index }" ng-click="selectRow($index, model)"> 
      <a href="">{{item.catID+" "+item.catName}}</a> 
     </li> 
    </ul> 

    <h4>Select Trend</h4> 
    <select class="form-control" id="trendID" ng-repeat="categories in model" ng-if="categories.catID == selCatID"> 
     <option ng-repeat="trends in categories.Trends">{{trends.trendName}}</option> 
    </select> 
</section> 

角度コントローラー：

angular.module('CatButtonController', []) 

    .controller("CatBtnCtrl",['$scope', function ($scope) { 
     $scope.rowIndex = -1; 
     $scope.selCatID = 0; 

     $scope.selectRow = function (index, model) { 
      if (index == $scope.rowIndex) 
       $scope.rowIndex = -1; 
      else { 
       console.log(model[index].catID); 
       $scope.rowIndex = index; 
       $scope.selCatID = model[index].catID; 
      } 

     }; 
}]);