问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在 AngularJS 中使用 <select> 和 <option>

社区维基
1
新手上路，请多包涵

我有这个锚标记，我根据来自对象的日期更改我的视图。我正在尝试将其更改为一个选择选项，但它没有按照我的方式工作。

这是锚标记语法：

  <a href="#" ng-repeat="item in home.prData" ng-click="home.selectedPr = item; $event.preventDefault();
 $event.stopPropagation();">{{item.date}}</a>

当我使用选择选项时，我试图将其更改为那样

 <select st-search="{{item.date}}" class="show-tick form-control dropdown_custom_list">
      <option value="">- select a date -</option>
      <option ng-repeat="item in home.prData" value="{{home.selectedPr = item}}">{{item.date}}
      </option>
  </select>

我为我想要实现的目标创建了一个示例 plunkr：

我的代码

原文由 Hesham El Masry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptangularjsdropdownng-optionsangularjs-select
阅读 462
2 个回答
得票最新
社区维基
1
✓ 已被采纳
<select st-search="{{item.date}}" ng-model="selectedDate" ng-change="home.selectedPr = selectedDate"
 class="show-tick form-control dropdown_custom_list">
  <option value="">- select a date -</option>
  <option ng-repeat="item in home.prData" value="{{home.selectedPr = item}}">{{item.date}}
  </option>
</select>

尝试添加一个 ng-model 变量并在 ng-change 上分配选定的日期。 ng-change 没有 ng-model

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="demoApp" ng-controller="mainController">

  <select class="show-tick form-control dropdown_custom_list" ng-model="selectedHotel" ng-options="hotel.name for hotel in hotels">
    <option value="">select one--</option>
  </select>

  <div>
    Hotel name: {{selectedHotel.name}} Category: {{selectedHotel.category | json}}
  </div>
</div>

<script>
  // Code goes here

  angular.module('demoApp', [])
    .controller('mainController', MainController);

  function MainController($scope) {

    $scope.selectedHotel = {};

    $scope.hotels = [{
      "id ": 1,
      "name": "some hotel 1 ",
      "category": [{
        "id ": 1,
        "hotel_id ": 1,
        "name ": "Cat name 1 ",
        "bnb ": "yes ",
        "simple ": "yes "
      }]
    }, {
      "id ": 2,
      "name": "some hotel 2 ",
      "category": [{
        "id ": 1,
        "hotel_id ": 2,
        "name ": "Cat name 1 ",
        "bnb ": "yes ",
        "simple ": "yes "
      }]
    }];
    // to make first  one default selected..
    //$scope.selectedHotel = $scope.hotels[0];
  }
</script>

原文由 Nikhil Mohanan 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

请参阅 AngularJS 选择指令 API 参考 - 使用 ngRepeat 生成 select 选项

 angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };
 }]);

 <script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option value="">- select an option -</option>
      <option ng-repeat="option in data.availableOptions"
              value="{{option.id}}">{{option.name}}
      </option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>

更新

我确实理解这一点，所以我必须做的 就是 匹配模型

请务必使用 ng-model 指令。

对于字符串以外的值，请使用 ng-value 指令：

 <select ng-model="mainCtrl.selectedHotel">
    <option value="">-select hotel-</option>
    <option ng-repeat="hotel in mainCtrl.hotels" ng-value="hotel">
        {{hotel.name}}
    </option>
</select>

了解更多信息，

原文由 georgeawg 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题