Question

我正在使用Angular js1和Onsen UI

在这里选择输入在Angularjs1中不起作用我如何使用此输入

<ons-page>

    <ons-toolbar>
    <div class="center">My App</div>
    </ons-toolbar>

    <div style="text-align: center; margin-top: 30px;">

    <p>
        <select modifier="tappable">
            <option value="">Select Car Model</option>
            <option >1</option>
            <option >2</option>
        </select>
    </p>

    <p style="margin-top: 30px;">
        <ons-button ng-click="submitLogin()">Sign in</ons-button>
    </p>



    </div>

</ons-page>

Answer 1

您可能缺少ng-model属性来存储用于ng-click的值。再次，没有看到你的js代码有点困难。但你可以尝试：

<p>
    <select modifier="tappable" ng-model="CarModel">
        <option disabled selected value="">Select Car Model</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</p>

<p style="margin-top: 30px;">
    <ons-button ng-click="submitLogin()">Sign in</ons-button>
</p>

然后你可以使用$ scope.CarModel在角度代码中调用它。在这里，您将看到1或2作为值。

上面代码的一种更有棱角的方法是将一个对象绑定到select，这样你就可以从代码或后端控制它。在AngularJs代码中，您可以将其定义为：

$scope.DataSet = [{Display:"One",Value:1},{Display:"Two",Value:2}];

关于加价：

<select ng-model="CarModel" ng-options="Data.Value as Data.Display for Data in DataSet"></select>

在这种情况下，Angular会为您生成标记，并在您单击选项时将值分配给模型。

除此之外，第一个选项上的禁用和选定属性允许您强制用户选择占位符以外的其他内容。

AngularJS 1 Selectbox在OnsenUI中不起作用

1 个答案: