使用角度 ng-switch 获取输入范围的值

Posted 2023-05-09

【中文标题】使用角度 ng-switch 获取输入范围的值

【英文标题】：Get the value of an input scope with angular ng-switch

【发布时间】：2019-02-24 19:12:24

【问题描述】：

应该怎么做

每个按钮都链接到一个 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) （这个有效，但不是我想要的）ng-show

<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】：

您遇到了一个经典的与范围相关的变量阴影问题。

ng-switch 创建一个新范围，因此您的 ng-model 绑定到 sum 和 adv 与您在 myController 中设置的不对应。

解决这个新创建的作用域的常用方法是将用于绑定的ng-model 属性放在对象后面并通过它引用它们。

例如，在您的 html 中：

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

然后在你的控制器中：

$scope.data =  sum: ... ;

Here's a demonstration of your snippet with some amendments to make it work.

【讨论】：

谢谢先生。我是 Angular 新手。