Question

构建Angular应用程序来处理一些自定义url逻辑，但我不确定如何将其构建为angular。

我有两个jsfiddles我将在这里包含源代码。

<select class="kv">
<!-- ngRepeat: n in get.evoltage --><option ng-repeat="n in get.evoltage" class="ng-binding ng-scope" value="230">230</option><!-- end ngRepeat: n in get.evoltage --><option ng-repeat="n in get.evoltage" class="ng-binding ng-scope" value="460">460</option><!-- end ngRepeat: n in get.evoltage -->
</select>

<select class="khp">
    <!-- ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="20">20</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="25">25</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="30">30</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="40">40</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="50">50</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="75">75</option><!-- end ngRepeat: n in get.ehp --><option ng-repeat="n in get.ehp" class="ng-binding ng-scope" value="100">100</option><!-- end ngRepeat: n in get.ehp -->     
</select>
<div  id="buynow-kore" class="buy">Buy Now</div>

    $( '#buynow-kore').on( "click", function() {
    var voltage = $( '.kv option:selected').text();
    var hp = $( '.khp option:selected').text();

    var hp15 = "http://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html";
    var hp50 = "http://www.compressorworld.com/50-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html";


    if (voltage == "230" && hp == "15"){
    window.location.href = hp15,"_parent";
    }

    });

基本上我正在测试所选的选项并重定向到正确的页面但是我也尝试将其置于角度，我将展示下面的代码，我不知道如何集成到dom。

var compressorView = angular.module('AC', [ 'ngRoute','metatags']);


compressorView.controller('homeCtrl', function ($scope) {

$scope.buy = function () {
    $(function () {
        $scope.$korebuy = $( '#buynow-kore').on( "click", function() {
        var voltage = $( '.kv option:selected').text();
        var hp = $( '.khp option:selected').text();

        var hp15 = "https://www.compressorworld.com/15-hp-rotary-screw-air-compressor-system-230-3-60-total-air-system.html";
        var hp20 = "https://www.compressorworld.com/20-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html";
        var hp50 = "https://www.compressorworld.com/50-hp-rotary-screw-air-compressors-complete-air-system-lifetime-airend-warranty.html";

        if (voltage == "230" && hp == "15"){
        window.location.href = hp15,"_blank";
        console.log("complete 15");
        }
        if (voltage == "230" && hp == "20"){
        window.location.href = hp20,"_blank";
        console.log("complete 20");
        }
        });
    });
};

$scope.buy();

});

https://jsfiddle.net/blynn17/ucvn0g3h/

https://jsfiddle.net/blynn17/q7wzvma5/

jquery代码在范围内，但我不确定$ korebuy或$ scope.buy是否必须映射到<div id="buynow-kore" class="buy">Buy Now</div>

Answer 1

使用像AngularJS这样的东西的全部意义在于避免使用JQuery，所以你应该避免同时使用它们，尤其是组合它们。

而不是var previousItem = array.first for index in 1..<array.count { let currentItem = array[index] // do something with current and previous items previousItem = currentItem }，您应该添加<div>

然后在你的控制器中你应该让你的代码做你想做的任何事情：

<div id="buynow-kore" ng-click="myFunction">Buy Now</div>

在Angular中编写jQuery或Javascript来扩展功能

1 个答案: