【问题标题】:How select an item from dropdown list in angularjs?如何从angularjs的下拉列表中选择一个项目?
【发布时间】:2015-07-14 21:38:27
【问题描述】:

如何从 angularjs 的下拉列表中选择一个项目,这里我使用的是普通选择列表,而不是来自对象数组。

如果我使用的是 ng-repeat,那么我可以选择一个,

但是我该怎么做呢?

 <select class="form-control" ng-model="range" ng-change="updateRange()">
        <optgroup label="Current">
            <option value="1.1">Today</option>
            <option value="1.2">This Week</option>
            <option value="1.3">This Month</option>
            <option value="1.4">This Quarter</option>
            <option value="1.5">This Year</option>
        </optgroup>
        <optgroup label="Previous">
            <option value="2.1">Yesterday</option>
            <option value="2.2">Previous Week</option>
            <option value="2.3">Previous Month</option>
            <option value="2.4">Previous Quarter</option>
            <option value="2.5">Previous Year</option>
        </optgroup>
        <optgroup  label="Custom">
            <option ng-value="3">Custom</option>
        </optgroup>
    </select>

【问题讨论】:

  • @maurcy 它不工作

标签: javascript php angularjs select angularjs-ng-model


【解决方案1】:

尝试将模型数据以数组的形式:

在您的控制器中

$scope.ModelValues = JSONResponse;

JSON 响应应包含要在下拉列表中选择的值,即

JSONResponse = {"range" : "100"}

html:

<select class="form-control" ng-model="ModelValues.range" ng-change="updateRange()">
</select >

【讨论】:

  • 如果您的 JSON 响应或硬代码中有值,请使用需要 ng-options。
  • 好的。很好,但是在为整个页面进行实际的双向数据绑定时,您可能会觉得我的方法更好!
  • 他究竟是如何在使用模型时失去双向数据绑定的?
  • 如果屏幕上的所有字段都获得单个 JSON 响应,您将如何进行双向绑定。你会一一分配 $scope 中的每一个变量吗?
  • 我认为您没有抓住重点,问题是关于在 select 中选择一个选项,并且您按照我在回答中的方式进行操作,显然,当您收到 json 时,如果您将其分配给单个模型必须部分使用它
【解决方案2】:

只需给与option值对应的模型赋值

http://plnkr.co/edit/bB4Y8aOufk9UL3oRRHD7?p=preview

app.controller('MainCtrl', function($scope) {
  $scope.range = 2.4
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2021-12-13
    • 2017-12-16
    • 1970-01-01
    相关资源
    最近更新 更多