Ну, я использую Angularjs в качестве калькулятора для jquery мобильной страницы, и она прекрасно работает. Мысль, когда я автоматически нажимаю на пустую область фона, я попадаю в верхнюю часть страницы, полоса прокрутки отключается, и я нет доступа к области, где отображаются результаты. Вот мой код, какую ошибку я делаю ?? Большое спасибо заранее
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css'>
<div data-role="page" id="CALC" data-tap-toggle="false" >
<div data-role="header" data-position="fixed">
<h1> TO CALCULATOR TOY ΝΕΦΡΟΠΑΘΗ</h1>
</div>
<div data-role="content" >
<div ng-app="myApp" ng-controller="myCtrl">
<p>ΕΠΙΛΕΞΤΕ ΤΡΟΦΙΜΟ ΚΑΙ ΠΟΣΟΤΗΤΑ:</p>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ1</strong></h1>
<select ng-model="selectedfood1" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity1" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ2</strong></h1>
<select ng-model="selectedfood2" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity2" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ3</strong></h1>
<select ng-model="selectedfood3" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity3" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ4</strong></h1>
<select ng-model="selectedfood4" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity4" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ5</strong></h1>
<select ng-model="selectedfood5" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity5" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ6</strong></h1>
<select ng-model="selectedfood6" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity6" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ7</strong></h1>
<select ng-model="selectedfood7" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity7" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ8</strong></h1>
<select ng-model="selectedfood8" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity8" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ9</strong></h1>
<select ng-model="selectedfood9" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity9" ng-options="x for (x, y) in quanity">
</select>
<h1 class="auto-style1"><strong>ΓΕΥΜΑ10</strong></h1>
<select ng-model="selectedfood10" ng-options="x for (x, y) in cars">
</select>
<select ng-model="quanity10" ng-options="x for (x, y) in quanity">
</select>
<h1>KAΛΙΟ: {{selectedfood1.kalio*quanity1.quanity--selectedfood2.kalio*quanity2.quanity--selectedfood3.kalio*quanity3.quanity--selectedfood4.kalio*quanity4.quanity--selectedfood5.kalio*quanity5.quanity--selectedfood6.kalio*quanity6.quanity--selectedfood7.kalio*quanity7.quanity--selectedfood8.kalio*quanity8.quanity--selectedfood9.kalio*quanity9.quanity--selectedfood10.kalio*quanity10.quanity| number:0 }}</h1>
<h2>NATPIO:{{selectedfood1.natrio*quanity1.quanity--selectedfood2.natrio*quanity2.quanity--selectedfood3.natrio*quanity3.quanity--selectedfood4.natrio*quanity4.quanity--selectedfood5.natrio*quanity5.quanity--selectedfood6.natrio*quanity6.quanity--selectedfood7.natrio*quanity7.quanity--selectedfood8.natrio*quanity8.quanity--selectedfood9.natrio*quanity9.quanity--selectedfood10.natrio*quanity10.quanity| number:0 }}</h2>
<h3>ΦΩΣΦΟΡΟΣ:{{selectedfood1.phosph*quanity1.quanity+selectedfood2.phosph*quanity2.quanity+selectedfood3.phosph*quanity3.quanity+selectedfood4.phosph*quanity4.quanity+selectedfood5.phosph*quanity5.quanity+selectedfood6.phosph*quanity6.quanity+selectedfood7.phosph*quanity7.quanity+selectedfood8.phosph*quanity8.quanity+selectedfood9.phosph*quanity9.quanity+selectedfood10.phosph*quanity10.quanity*quanity10.quanity| number:0 }}</h3>
<p>Note that the selected value represents an object.</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cars = {
ΜΠΑΝΑΝΑ: {kalio : "300", natrio : "200", phosph : "100"},
AΓΚΟΥΡΙ: {kalio : "200", natrio : "500", phosph : "85"},
ΨΩΜΙ: {kalio: "100", natrio : "150", phosph : "90"} }
$scope.quanity = {
KENO : {quanity: "0.0"},
ENATETAPTO : {quanity : "0.25"},
ΔΥΟTETAPTA : {quanity: "0.5"},
TPIATETAPTA : {quanity : "0.75"},
ENA: {quanity: "1.0"},
ΔΥΟ : {quanity: "2.0"},
TPIA : {quanity: "3.0"},
TEΣΣEPA : {quanity : "4.0"},
ΠENTE :{quanity :"5.0"},
EΞI:{quanity:"6.0"},
EΠTA:{quanity:"7.0"},
OKTΩ:{quanity:"8.0"},
ENEA:{quanity:"9.0"},
ΔEKA:{quanity:"10.0"}}
});
</script>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top" >
<ul>
<li><a href="#INTRO" data-role="button" data-icon="home">ΕΙΣΑΓΩΓΗ</a></li>
<li><a href="#CALC" data-role="button" data-icon="grid">ΥΠΟΛΟΓΙΣΜΟΣ</a></li>
<li><a href="#LIM" data-role="button" data-icon="info">ΟΡΙΑ</a></li>
</ul>
</div>
</div>