Как добавить дополнительное значение к опции в раскрывающемся списке и как получить это значение, когда опция выбрана в угловой js 1.x

Question

У меня есть код ниже в jQuery. Я хочу знать, что эквивалентный код выше в Angular Js 1.x Версии?

<select id="select">
  <option value="1" data-foo="dogs">this</option>
  <option value="2" data-foo="cats">that</option>
  <option value="3" data-foo="gerbils">other</option>
</select>

// JavaScript using jQuery
$(function() {
  $('select').change(function() {    
    var selected = $(this).find('option:selected');
    var extra = selected.data('foo'); 
  });
});

var sel = document.getElementById('select');
var selected = sel.options[sel.selectedIndex];
var extra = selected.getAttribute('data-foo');

Answer 1

Добавьте значение к модели, которая предоставляется в качестве источника данных для ng-repeat, и установите ng-model для раскрывающегося списка. И получите значение раскрывающегося списка, используя ng-model.

Answer 2

Вам не нужно использовать jQuery, когда вы используете angularjs.

Чтобы получить выбранное значение в раскрывающемся списке, вам нужно смоделировать select с ng-model, и тогда значение будет там на лету. Это красота angularjs.

Более того, если вы заинтересованы в добавлении параметров на лету, лучше использовать ng-repeat, чтобы сделать это. И нажмите на массив, когда вам нужно добавить другую опцию. Опция будет добавлена ​​к select. Еще одно произведение красоты angularjs

Здесь

angular.module('app',[]).controller('ctrl', function($scope){

 $scope.options = [{value : 1, attr: "dogs" },{value : 2, attr: "cats" },{value : 3, attr: "gerbils" }];
 
 $scope.data = $scope.options[0]
 $scope.select = 1;
 $scope.add = function(){
   $scope.options.push({value : $scope.options.length + 1, attr: 'option'})
 
 };
 
 $scope.getFoo = function(){
        
    $scope.data = $scope.options.find(o=> o.value == $scope.select)
 }
 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
<select id="select" ng-model="select" ng-change="getFoo()">
  <option ng-repeat="option in options" value="{{option.value}}" data-foo="{{option.attr}}">{{option.attr}}</option>

</select>

<button ng-click="add()">Add option</button>
{{data.value}}
{{data.attr}}
 
</div>