如何将JQuery代码转换为Angular

10 浏览
0 Comments

如何将JQuery代码转换为Angular

我已经为此挣扎了很久，但似乎找不到一个相对简单的解决办法。我希望用户点击一个按钮，然后这个按钮将把选择的项目放入一个对象中。

以下是可以实现这一目标的jQuery代码：

$("#addUserGroup").click(function () {

var selectedValues = [];

$("#UserGroups :selected").each(function () {

selectedValues.push($(this).val());

});

alert(selectedValues);

});

我想实现相同的功能，但将对象放在我的Angular控制器中可以访问。如果有人能指点我正确的方向，我将非常感激。

编辑：

下面的答案解决了问题，但这是我稍微修改的代码，以处理选择多个项目的情况（如果您的选择框允许）：

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

app.controller('MainCtrl', function($scope) {

$scope.values = [];

$scope.selectedValue = "foo";

$scope.addValue = function () {

$scope.values.push($scope.selectedValue);

console.log($scope.values);

for (i = 0; i < $scope.values.length; i++) {

console.log($scope.values[i]);

}

//做任何操作以处理选项列表的值

//重置values数组，以便下一次点击时为空

$scope.values = [];

}

});

0

1 答案

0 Comments

问题的出现原因：原来的代码是使用jQuery编写的，而现在想要将其改成使用Angular编写。

解决方法：根据原来的jQuery代码，重新编写了使用Angular的代码。主要的变化是使用了ng-model指令来绑定选择框的值，使用ng-click指令来绑定按钮的点击事件。在Angular的控制器中，定义了一个values数组和selectedValue变量，并且定义了一个addValue函数，用于将selectedValue的值添加到values数组中。在HTML中，使用ng-controller指令来绑定控制器，使用ng-model指令来绑定选择框的值，使用ng-click指令来绑定按钮的点击事件。

以下是改写后的代码：

JS

app.controller('MainCtrl', function($scope) {
  $scope.values = [];
  $scope.selectedValue = "foo";
  $scope.addValue = function () {
    $scope.values.push($scope.selectedValue);
    console.log($scope.values);
  }
});

HTML

<body ng-controller="MainCtrl">
<select ng-model="selectedValue">
  <option>foo</option>
  <option>bar</option>
  <option>foobar</option>
</select>
<button ng-click="addValue()">Add</button>

希望这能帮到你。

http://plnkr.co/edit/afOIDxki62Tuz9csNz4O?p=info

这个回答有帮助吗？还有其他需要的功能吗？

是的，非常感谢！我只是稍微修改了一下，使其能够接受多个选项，我在我的编辑中展示了这个功能。

太棒了，感谢你更新原始问题。这对于遇到相同问题并偶然发现这个页面的其他人非常有帮助。

0