将 jQuery 转换为 Angular - 单击下拉菜单中的按钮更改选项答案

【问题标题】：Converting jQuery to Angular - Click Button change options in Dropdown Menu将 jQuery 转换为 Angular - 单击下拉菜单中的按钮更改选项
【发布时间】：2017-08-01 19:38:35
【问题描述】：

我想将一些 AngularJS 功能添加到我正在使用 jQuery 的现有站点中。我有以下问题：

在 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。

【问题讨论】：

Stackoverflow 不是代码转换服务或“如何” 教程服务
对@charlietfl 感到抱歉！谢谢@lin

标签： javascript jquery html angularjs forms

【解决方案1】：

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

查看

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

【讨论】：