angularJS- ng-options 和ng-repeat创建select

最新推荐文章于 2019-11-10 20:02:02 发布

杨广凡

最新推荐文章于 2019-11-10 20:02:02 发布

阅读量594

点赞数

分类专栏： Angular JS 文章标签： ng-options ng-repeat angular

本文链接：https://blog.youkuaiyun.com/stu_20052369/article/details/87099931

版权

本文详细探讨AngularJS中用于创建下拉选择框的ng-options和ng-repeat指令。ng-options通常用于根据对象数组生成选项，而ng-repeat更适合遍历列表生成列表项。两者各有优势，ng-options简化了复杂数据绑定，ng-repeat则提供了更多灵活性。通过实例，我们将深入理解这两个指令的工作原理及其在实际项目中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl">
        <h2>1.使用 ng-options 指令</h2>
        <!--ng-options 指令创建的下拉列表，选中的值是一个对象, 所以建议使用 ng-option来创建select -->
        <p>选择水果:</p>
        <!-- ng-model 和 ng-init 里面绑定的变量名需要一样 -->
        <select ng-model="selectedFruit" ng-init="selectedFruit= fruits[1]" ng-options="x.Alias for x in fruits">
        </select>
        <p>你选择的是: {
  {selectedFruit.name}}</p>
        <p>别名为: {
  {selectedFruit.Alias}}</p>
        <p>单价为: {
  {selectedFruit.price}}</p>

        <h2>2.使用 ng-repeat 指令</h2

最低0.47元/天解锁文章