Converting jQuery to Angular - Click Button change options in Dropdown Menu

Question

I wanted to add some AngularJS functionalities to an existing site in which I am using jQuery. I have the following problem:

In jQuery, when I click a button, the dropdown item changes. Please see jsfiddle below:

$('#cameratagete').click(function() {
  $('#rooms option[value="Camera Tagete"]').attr('selected', true);
});
$('#cameraoleandro').click(function() {
  $('#rooms option[value="Camera Oleandro"]').attr('selected', true);
});
$('#cameragelsomino').click(function() {
  $('#rooms option[value="Camera Gelsomino"]').attr('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="cameratagete" href="#">Item 1</a>
<a id="cameraoleandro" href="#">Item 2</a>
<a id="cameragelsomino" href="#">Item 3</a>

<form>

  <select id="rooms">
    <option value="1">I dont know</option>
    <option value="Camera Tagete">Tagete</option>
    <option value="Camera Oleandro">Oleandro</option>
    <option value="Camera Gelsomino">Gelsomino</option>
  </select>

</form>

http://jsfiddle.net/almostpitt/0b7fybjr/

When I use this in a form in Angular, the item is still chosen on the form and you can see it visually on the page, however, it is not read by the form in the sense that when you submit the form, the option is not sent.

However, if you select that option directly on the dropdown and submit the form, the option is submitted as well.

My question is, can I convert this piece of jQuery into AngularJS? I'm hoping that this would allow the form to read the selected item.

Thanks!

Note: I am using Angular 1.5.5.

Stackoverflow is not a code conversion service or a "how to" tutorial service — charlietfl
– charlietfl, Commented Mar 11, 2017 at 13:48

lin · Accepted Answer · 2017-03-11 13:32:25Z

Prettty easy to achieve this with AngularJS like in this runnable fiddle.

View

<div ng-controller="MyCtrl">

  <a id="cameratagete" ng-click="selected = '1'">Select: Item 1</a><br/>
  <a id="cameratagete" ng-click="selected = 'Camera Tagete'">>Select: Item 2</a><br/>
  <a id="cameratagete" ng-click="selected = 'Camera Oleandro'">>Select: Item 3</a><br/>

  <form method="post" action="./test">
    <select id="rooms" ng-model="selected" name="someOption">
      <option value="1">I dont know</option>
      <option value="Camera Tagete">Tagete</option>
      <option value="Camera Oleandro">Oleandro</option>
      <option value="Camera Gelsomino">Gelsomino</option>
    </select>
    <br />
    <button type="submit">
      Send
    </button>
  </form>
</div>

AngularJS application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.selected = '1';
});

Collectives™ on Stack Overflow

Converting jQuery to Angular - Click Button change options in Dropdown Menu

1 Answer 1

View

AngularJS application

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

View

AngularJS application

Comments

Your Answer

Sign up or log in

Post as a guest

Related