javascript - Using <select> and <option> in AngularJS

Question

Welcome To Ask or Share your Answers For Others

javascript - Using <select> and <option> in AngularJS

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

This is anchor tag syntax:

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

I am trying to change it to be like that when i use select option

 <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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:43:06+0000

See AngularJS select Directive API Reference - Using ngRepeat to generate select options

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>

Categories

javascript - Using <select> and <option> in AngularJS

javascript - Using <select> and <option> in AngularJS

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags