javascript - 将 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';
});