动态地将值加载到html

时间：2017-03-17 17:53:52

标签： javascript jquery html angularjs

我有这个功能：

var app = angular.module("delivcard", []);
app.controller("DelivCtrl", ['$scope', function ($scope) {

$scope.card = function ()
{
  $scope.cards = [{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: yeastBank[1].attenuation},
  {name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: '73.0% - 80.0%'}];
}
}]);

应该将值加载到html页面。但是，这些值来自数据库，因此我不希望在页面打开后立即加载值。另一方面，我想在调用函数时加载值。以下是我在html脚本中使用不同的js文件调用的方法：

    OTHER FUNCTIONS
function initShopDisplay()
    {
        for(var i = 0; i < yeastBank.length; i++)
        {
            if(yeastBank[i].isPrivate == false)
            {
              $scope.card();
            }
        }

}

但是，这会返回$scope未定义的内容。有什么问题？另外，如何根据索引的大小来使变量$scope.cards添加行。

Angular文件

'use strict';

$(document).ready(function() {
  var animating = false;
  var step1 = 500;
  var step2 = 500;
  var step3 = 500;
  var reqStep1 = 600;
  var reqStep2 = 800;
  var reqClosingStep1 = 500;
  var reqClosingStep2 = 500;
  var $scrollCont = $(".phone__scroll-cont");


  $(document).on("click", ".card:not(.active)", function() {
    if (animating) return;
    animating = true;

    var $card = $(this);
    var cardTop = $card.position().top;
    var scrollTopVal = cardTop - 30;
    $card.addClass("flip-step1 active");

    $scrollCont.animate({scrollTop: scrollTopVal}, step1);

    setTimeout(function() {
      $scrollCont.animate({scrollTop: scrollTopVal}, step2);
      $card.addClass("flip-step2");

      setTimeout(function() {
        $scrollCont.animate({scrollTop: scrollTopVal}, step3);
        $card.addClass("flip-step3");

        setTimeout(function() {
          animating = false;
        }, step3);

      }, step2*0.5);

    }, step1*0.65);
  });

  $(document).on("click", ".card:not(.req-active1) .card__header__close-btn", function() {
    if (animating) return;
    animating = true;

    var $card = $(this).parents(".card");
    $card.removeClass("flip-step3 active");

    setTimeout(function() {
      $card.removeClass("flip-step2");

      setTimeout(function() {
        $card.removeClass("flip-step1");

        setTimeout(function() {
          animating = false;
        }, step1);

      }, step2*0.65);

    }, step3/2);
  });

  $(document).on("click", ".card:not(.req-active1) .card__request-btn", function(e) {
    if (animating) return;
    animating = true;

    var $card = $(this).parents(".card");
    $card.removeClass("flip-step3 active");

    setTimeout(function() {
      $card.removeClass("flip-step2");

      setTimeout(function() {
        $card.removeClass("flip-step1");

        setTimeout(function() {
          animating = false;
        }, step1);

      }, step2*0.65);

    }, step3/2);
  });

  $(document).on("click",
                 ".card.req-active1 .card__header__close-btn, .card.req-active1 .card__request-btn",
                 function() {
    if (animating) return;
    animating = true;

    var $card = $(this).parents(".card");

    $card.addClass("req-closing1");

    setTimeout(function() {
      $card.addClass("req-closing2");

      setTimeout(function() {
        $card.addClass("no-transition hidden-hack")
        $card.css("top");
        $card.removeClass("req-closing2 req-closing1 req-active2 req-active1 map-active flip-step3 flip-step2 flip-step1 active");
        $card.css("top");
        $card.removeClass("no-transition hidden-hack");
        animating = false;
      }, reqClosingStep2);

    }, reqClosingStep1);
  });

});

var app = angular.module("delivcard", []);
app.controller("DelivCtrl", function ($scope) {

$scope.cards = "";
$scope.card = function ()
{
  $scope.cards = [{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: yeastBank[1].attenuation},
{name: 'California Ale Yeast', ferment:'68F - 73F', tolerance: 'High', attenuation: '73.0% - 80.0%'}];
}
});

HTML 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Delivery Card Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">

    <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'>

    <link rel="stylesheet" href="css/store.css">


</head>

<body>
    <div ng-app="delivcard">
        <div ng-controller="DelivCtrl">
            <section ng-repeat="card in cards" class="card theme-purple ng-scope" data-color="#BA68C8">

                <section class="card__part card__part-1">
                    <div class="card__part__inner">
                        <header class="card__header">
                            <div class="card__header__close-btn"></div>
                            <span class="card__header__id ng-binding"># 2618-3157</span>
                        </header>
                        <div class="card__stats" ng-style="{'background-image': 'url()'}" style="background-image: url(&quot;);">
                        </div>
                    </div>
                </section>
                <section class="card__part card__part-2">
                    <div class="card__part__side m--back">
                        <div class="card__part__inner card__face">
                            <div class="card__face__colored-side"></div>

                            <div class="card__face__from-to">
                                <p class="ng-binding">{{card.name}}</p>

                            </div>

                            <div class="card__face__stats card__face__stats--req">Optimal Ferment. Temp
                                <p class="ng-binding">{{card.ferment}}</p>
                            </div>
                            <div class="card__face__stats card__face__stats--pledge">Alcohol Tolerance
                                <p class="ng-binding">{{card.tolerance}}</p>
                            </div>
                            <div class="card__face__stats card__face__stats--weight">Attenuation
                                <p class="card__face__stats__weight">

                                    <span class="ng-show">{{card.attenuation}}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card__part__side m--front">
                        <div class="card__sender">
                            <h4 class="card__sender__heading">Description</h4>

                            <div class="card__path-big"></div>
                        </div>
                        <div class="card__from-to">
                            <div class="card__from-to__inner">
                                <div class="card__text card__text--left">
                                    <p class="card__text__heading">Pitchable Batch Size:</p>
                                    <p class="card__text__middle ng-binding"><select id="size" name="size" class=""><option value="5">5 BBLs/HL</option><option value="7">7 BBLs/HL</option><option value="10">10 BBLs/HL</option><option value="20">20 BBLs/HL</option><option value="30">30 BBLs/HL</option><option value="40">40 BBLs/HL</option><option value="50">50 BBLs/HL</option><option value="60">60 BBLs/HL</option><option value="70">70 BBLs/HL</option><option value="80">80 BBLs/HL</option><option value="90">90 BBLs/HL</option><option value="100">100 BBLs/HL</option></select></p>
                                </div>
                                <div class="card__text card__text--right">
                                    <p class="card__text__heading">Quantity:</p>
                                    <p class="card__text__middle ng-binding"><input id="modalQTY" name="modalQTY" type="number" placeholder="Quantity" style="width: 80px;" min="1" value="1" class=""></p>
                                </div>
                            </div>
                        </div>
                        <section class="card__part card__part-3">
                            <div class="card__part__side m--back"></div>
                            <div class="card__part__side m--front">
                                <div class="card__timings">
                                    <div class="card__timings__inner">
                                        <div class="card__text card__text--left">
                                            <p class="card__text__heading">Packaging</p>
                                            <p class="card__text__middle ng-binding"><select id="packaging" name="packaging" class=""><option value="pp">Pure Pitch</option><option value="hb">Homebrew</option><option value="cp">Custom Pour</option></select></p>
                                        </div>
                                    </div>
                                </div>
                                <section class="card__part card__part-4">
                                    <div class="card__part__side m--back"></div>
                                    <div class="card__part__side m--front">
                                        <button type="button" class="card__request-btn">
                      <span class="card__request-btn__text-1">Add to Cart</span>
                    </button>
                                    </div>
                                </section>
                            </div>
                        </section>
                    </div>
                </section>
            </section>
        </div>
    </div>

    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js'></script>
    <script src="js/store.js"></script>
    <script type="text/javascript" src="js/SalesIntegration.js"></script>

</body>

</html>

0 个答案:

没有答案
相关问题
最新问题