使用< select>和< option>在AngularJS中 [英] Using <select> and <option> in AngularJS

问题描述

我有这个定位标记，并且我根据对象的日期更改了视图.我正在尝试将其更改为选择选项，但它无法按照我的方式工作.

I have this anchor tag and i change my view depending on the date coming from the object. I am trying to change it to be a select option but it is not working the way i am doing it.

这是锚标记语法:

 <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>

我为要实现的目标创建了一个示例代码:

i created an example plunkr to what i am trying to achieve:

mycode

推荐答案

<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的情况下将不起作用

Try adding a ng-model variable and on ng-change assign selected date.ng-change wont work without 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>

这篇关于使用< select>和< option>在AngularJS中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！