如何在angular js中从前端获取下拉列表的选定值答案

【问题标题】：How to get the selected value of a drop down from front end in angular js如何在angular js中从前端获取下拉列表的选定值
【发布时间】：2016-10-03 08:43:30
【问题描述】：

这是我的控制器

var controller = app.controller('ctrl', function ($scope) {
  $scope.dropdown = ["Yearly", "Monthly", "Date"];
});

这是我的 HTML 内容：

<body ng-app="app" ng-controller="ctrl">
<div>
    <table>
        <tr>
            <td>
                <label>Select :</label>
            </td>
            <td>
                <select data-ng-model="option">
                    <option ng-repeat="date in dropdown" ng-bind="date" value="{{date.value}}"></option>
                </select>
            </td>
        </tr>

        <tr ng-show="option == 'Yearly'">
            <td>
                <label>From:</label>
            </td>
            <td>
                <input type="date" ng-model="fromdate" id="fromdate" date-picker />
            </td>
            <td>
                <label>To:</label>
            </td>
            <td>
                <input type="date" ng-model="todate" date-picker />
            </td>
        </tr>
    </table>
</div>

我正在尝试获取用户从前端下拉列表中选择的值，我需要根据下拉列表中选择的值隐藏或显示一些文本框。

【问题讨论】：

您需要在控制器中定义选项。看我的回答。

标签： javascript jquery html angularjs frontend

【解决方案1】：

这是下拉html

<select ng-model='option' ng-options="date for date in dropdown"></select>

并在控制器中定义选项

$scope.option = null

在此处使用此选项进行显示/隐藏

【讨论】：

track by 是 angular internals 跟踪重复循环的一种方式 - 您有时可能会在此出现 angular throw 错误，而 track by $index 将解决...这里没有具有值的对象身份证...

【解决方案2】：

使用ng-options，

<select ng-model="selectedOption" ng-options="date for date in dropdown"></select>

您选择的选项将填充到selectedOption 范围变量中。

【讨论】：

【解决方案3】：

ng-model 而不是 ng-bind 但是我建议使用 ng-options...

 <select ng-options="date for date in dropdown" ng-model="option"></select>

文档here

【讨论】：

我需要获取 select 的值并用它来显示/隐藏下面的 tr
From: To:
没问题 - ng-show 应该可以解决问题。现在，如果选项为“每年”，您已将其设置为显示此 tr
谢谢...它工作得很好...但是当下拉第一次加载时选择的值是空的...但是我需要这个值是“每年”$scope.dropdown = ["每年", "每月", "日期"]; , 这是数组中的第一个值
$scope.option = '每年'