[英]angular JS view does not update properly
这是我使用Angular JS的第一天,所以我是一个新手,我想就我不了解的行为做一些解释。 我正在尝试构建一个由“面板”组成的表单。 每个面板包含许多表单元素(复选框,单选组等)或消息。 在开始时,只有第一个面板可见。 每次用户执行“操作”(检查某事,选择某事)。 根据先前的选择和其他数据,将出现一个面板(有时更多)。
每个表单元素在控制器中都有其模型。 每个面板都有一个指令ngShow和一个控制器中的函数,这些函数返回是否应显示该面板。 这是我的两个面板代码的一小部分内容:
第一面板(始终显示“ ROOT”面板)
<div class="panel panel-default" data-ng-show="true">
<div class="panel-heading">
<h3 class="panel-title">PLP</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-offset-0 col-xs-10">
<div class="radio">
<label><input type="radio" name="group" data-ng-model="choixPlp" value="plp1"> PLP 1</label>
</div>
<div class="radio">
<label><input type="radio" name="group" data-ng-model="choixPlp" value="plp2"> PLP 2</label>
</div>
<div class="radio">
<label><input type="radio" name="group" data-ng-model="choixPlp" value="plp3"> PLP3</label>
</div>
</div>
</div>
<p> {{choixPlp}} </p>
</div>
</div>
第二小组
<div class="panel panel-default"
data-ng-show="fmotifRetourCommentaires()">
<div class="panel-heading">
<h3 class="panel-title">Dépot</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-offset-0 col-xs-10">
<label> Motif Retour : {{motif}} </label>
<p>Commentaires</p>
<div class="textarea"></div>
<textarea rows="" cols=""></textarea>
<br />
<button type="submit" class="btn btn-default">Déposer</button>
</div>
</div>
</div>
</div>
App.js
var app = angular.module('dynamicForm', []);
app.controller('MainCtrl', function($scope) {
$scope.choixPlp;
$scope.motif;
$scope.fmotifRetourCommentaires = function() {
if ($scope.choixPlp == "plp1") {
$scope.motif = "Degroupage Abusif";
return true;
}
if ($scope.choixPlp == "plp2") {
$scope.motif = "Deconstruction a tort";
return true;
}
return false;
};
});
我的问题是,当我在第一个面板上更改选择时,视图不会在第二个面板中显示变量“ motif”的值,并且不会更改。 仅当我在新选择上单击两次时,它才会更改。 我确实添加了这部分代码并且可以正常工作,但是我不明白为什么...
setInterval(function() {
$scope.$apply()
}, 500)
它不能在第一次单击上起作用,而在第二次单击上起作用的原因是,直到单选按钮失去焦点后,模型才会被设置(出于某些原因,我认为监视和刷新的顺序不合适)
由于要基于choixPlp的值执行某些操作,因此可以考虑在该变量上设置监视。 我对您的代码进行了一些修改,并使用了变量show_panel_2,该标志根据watch中的功能进行设置或取消设置。
<div class="panel panel-default"
data-ng-show="show_panel_2">
<div class="panel-heading">
<h3 class="panel-title">Dépot</h3>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-xs-offset-0 col-xs-10">
<label> Motif Retour : {{motif}} </label>
<p>Commentaires</p>
<div class="textarea"></div>
<textarea rows="" cols=""></textarea>
<br />
<button type="submit" class="btn btn-default">Déposer</button>
</div>
</div>
</div>
</div>
<script>
var app = angular.module('dynamicForm', []);
app.controller('MainCtrl', function($scope) {
$scope.choixPlp;
$scope.motif;
$scope.show_panel_2 = false;
$scope.$watch('choixPlp', function() {
if ($scope.choixPlp == "plp1") {
$scope.motif = "Degroupage Abusif";
$scope.show_panel_2 = true;
return;
}
if ($scope.choixPlp == "plp2") {
$scope.motif = "Deconstruction a tort";
$scope.show_panel_2 = true;
return;
}
$scope.show_panel_2 = false;
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.