将jQuery转换为Angular - 在“下拉菜单”中单击“按钮”更改选项

Question

我想在我使用jQuery的现有网站上添加一些AngularJS功能。我有以下问题：

在jQuery中，当我单击一个按钮时，下拉项目会发生变化。请参阅下面的jsfiddle：

$('#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/

当我在Angular的表单中使用它时，仍然在表单上选择该项目，您可以在页面上直观地看到它，但是，在您提交表单时，表单不会读取表单，该选项未发送。

但是，如果您直接在下拉列表中选择该选项并提交表单，则也会提交该选项。

我的问题是，我可以将这段jQuery转换为AngularJS吗？我希望这会允许表单读取所选项目。

谢谢！

注意：我使用的是Angular 1.5.5。

Answer 1

使用AngularJS很容易实现这一点，就像在runnable fiddle中一样。

视图

<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应用程序

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

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