Получить значение входного объема с помощью углового переключателя ng - PullRequest
Новая
       8

Получить значение входного объема с помощью углового переключателя ng

0 голосов
/ 20 сентября 2018

Что нужно сделать

Каждая кнопка связана с блоком div (например: button01 ссылается на block01).Каждый блок div имеет 3 входа.Последний вход получает значение математической функции между двумя входами над ним.Блоки div должны «появляться», а не показываться / скрываться.

Что он делает

Часть, где три кнопки открывают три блока divработает.Проблема в том, что когда я пытаюсь что-то набрать внутри двух входов, последний ввод ничего не получает.

То, что я пробовал

1) ng-switch и ng-switch-when

2) поместите div внутри каждого (script type="text/ng-template" id="aaa") и затем; 

var forms = ["aaa", "bbb", "ccc", "ddd"];

credit_block.displayedForms = [];

credit_block.addForm = function(formIndex) {
    credit_block.displayedForms = [];
    credit_block.displayedForms.push(forms[formIndex]);     
}

3) (этот работает, но это не то, что я хочу) нг-шоу 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>


<div class="row">
			<div class="col-sm-12">
					Pick a topic:
					<label><span>Button01</span><input style="display:none" type="radio" ng-model="myVar" value="block01"></label>
					<label><span>Button02</span><input style="display:none" type="radio" ng-model="myVar" value="block02"></label>
					<label><span>Button03</span><input style="display:none" type="radio" ng-model="myVar" value="block03"></label>
			</div>
		</div>
		
		<div class="row" ng-switch="myVar">
			<div class="col-sm-12" ng-switch-when="block01">
				<h3>Cumpar locuinta</h3>
				<div class="row">
					<div class="col-sm-10 col-xs-8 number-box">
						<label>Sum:</label>
						<input class="button-option" type="number" ng-model="sum">
					</div>
				</div>
				<div class="row">
					<div class="col-sm-10 col-xs-8 number-box">
						<label>Advancement:</label>
						<input class="button-option" type="number" ng-model="adv">
					</div>
				</div>
				<div class="row">
					<div class="col-sm-10 col-xs-8 number-box">
						<label>Value:</label>
						<input class="button-option" type="number" value="{{ result() }}">
					</div>
				</div>
			</div>
  
		</div>
	</div>

<script>
	var myApp = angular.module('myApp', []);
	myApp.controller('myController', function($scope) {
		$scope.sum = 5;
		$scope.adv = 4;
        $scope.result = function() {            
                return $scope.sum - $scope.adv;
        };
    });
</script>

1 Ответ

0 голосов
/ 20 сентября 2018

У вас есть классическая проблема с изменением теней, связанная с областью действия.

ng-switch создает новую область, поэтому ваши ng-model привязки к sum и adv не соответствуютте, которые вы установили в myController.

Обычный способ обойти эту недавно созданную область видимости - это поместить ng-model свойства для привязки позади объекта и ссылаться на них через него.

Например, в вашем HTML: 

<input class="button-option" type="number" ng-model="data.sum">

Затем в вашем контроллере: 

$scope.data = { sum: ... };

Вот демонстрация вашего фрагмента с некоторыми поправками, чтобы он работал.

...