Использование ‹select› и ‹option› в AngularJS

У меня есть этот тег привязки, и я меняю свое представление в зависимости от даты, исходящей от объекта. Я пытаюсь изменить его на вариант выбора, но он не работает так, как я это делаю.

Это синтаксис тега привязки:

 <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 того, чего я пытаюсь достичь:

мой код


javascript dropdown angularjs ng-options angularjs-select
person Hesham El Masry    schedule 10.07.2017    source источник
comment
Попробуйте ng-change=home.selectedPr = item по вашему выбору и используйте ng-модель   -  person Vivz    schedule 10.07.2017
comment
См. Справочник по API директивы выбора AngularJS — Использование ngRepeat для создания select вариантов   -  person georgeawg    schedule 10.07.2017

Ответы (3)


arrow_upward
3
arrow_downward 

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

person Nikhil Mohanan    schedule 10.07.2017
comment
я сделал, но это не работает, я не понимаю, почему: см. этот пример - person Hesham El Masry; 10.07.2017
comment
@HeshamElMasry, я включил фрагмент w r в ваш plunkr. Надеюсь, что это поможет вам.. - person Nikhil Mohanan; 10.07.2017

arrow_upward
4
arrow_downward

См. Справочник по API директивы выбора AngularJS — Использование 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>

Чтобы получить больше информации,

person georgeawg    schedule 10.07.2017

arrow_upward
1
arrow_downward

после того, как я продолжил попытки и поиск, я нашел решение, поэтому мне пришлось использовать ng-модель и назначить ее моему selectedPr в качестве примера. и это сработало

<select class="form-control selectpicker show-tick" 
        title="Select period" selectpicker ng-model="home.selectedPr"
        ng-options="item.date for item in home.prData">
</select>
person Hesham El Masry    schedule 10.07.2017