Question

到目前为止，这是我的工作：

<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>

dataCtrl引入一个模型，其中包含运行此小测试程序所需的所有数据。我通过运行{{model | json}}并查看列出的数据，所以我知道数据没问题。

“类别”中的所有按钮都标记正确，下拉菜单也是如此。

我的目的是让用户选择一个类别，这将显示一个下拉菜单（我打算使用ng-if来完成此操作）。但是，我从按钮获取值时遇到了一些困难。我试过了：

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

但这永远不会奏效。我也尝试过构建一个新的控制器，然而这会导致整个事情崩溃。我已经请求了这方面的帮助，尽管它们看起来很合理，但当我应用它们时，它们似乎无法正常工作。

我的'app.js'目前有两个功能正常的控制器，包括dataCtrl，所以我知道我正在做所有这些而没有错误。只有当我尝试添加按钮控制器时，整个事情才会崩溃。

如果有人可以帮助我解释这个问题，我会很感激，这样我就可以从中学到一些东西。

先谢谢你。

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;
            }

        };
}]);

如何在按钮组中输出变量以影响Angular.js和Html

2 个答案: