离子 select 与 angularjs

Question

我是 ionic + 的新手 angularJS...我创建了一个 select 项目下拉列表，如下所示

<div class="list">
    <div class="item item-input item-select">
      <div class="input-label" >
       Unit
     </div>
      <select id="unit">
        <option selected>Kilometer</option>
        <option>Mile</option>
      </select>
 </div>
</div>

我想通过 angularJS 获取值...我试过了... 当我点击一个按钮时 scope.convert 就来了。

$scope.convert = function() {

alert($scope.unit);
};

它输出"undefined"..这是为什么？

Answer 1

$scope.unit 实际上没有在范围内定义，因此你得到 undefined。您必须在范围上定义 unit。由于这是一个 angular 应用程序，您可以按 angular 方式进行。

在您的控制器中，您想定义一个模型来保存值 selected。让我们称这个模型为 unit，就像你实际尝试做的那样。因此，您可以在控制器中将此模型初始化为 Kilometer。

$scope.unit = 'Kilometer'

现在您需要一系列选项。这也可以在您的控制器中设置。

$scope.unitOptions = ['Kilometer', 'Mile']

我们使用范围将我们的模型暴露给视图，因此在您的视图中，您可以按如下方式访问此模型：

<select id='unit' ng-options="unit for unit in unitOptions">

您将获得一个包含 'Kilometer' 和 'Mile' 的下拉菜单。您可以 select 其中任何一个，您的模型 unit 将被更新。

//This should now work
$scope.convert = function() { 
    alert($scope.unit);
 };

注意：我在 select 元素上保留了 id 属性，以表明它与您控制器中的模型无关。

离子 select 与 angularjs

ionic select with angularjs

angularjs

ionic