在 AngularJS 中更新屏幕视图

Question

嘿——我正在开发一个 angular 1.6 应用程序，我遇到了一个我不太确定如何解决的问题。这是对设置的简要讨论。该页面是一个包含三十个问题的表格。客户端有很多条件逻辑如下：如果用户在 Q1 上选择“是”，则向他们显示 Q2-4，如果在 Q1 上选择“否”，则跳至 Q5。这在三十个问题的形式中重复。

我遇到过以下场景——如果用户在 Q1 上选择“是”，回答 Q2-4，然后意识到 Q1 真的应该是“否”会怎样。

所以我的问题是：1) 如何清除模型？和 2) 如何更新视图？因此，如果他们第三次决定 Q1 实际上应该是肯定的，那么 Q2-Q4 是 unchecked/clear/blank。

对于1）我只是写了一个简单的“clearAll方法如下：

function clearAll(arr){
        arr.forEach(function(element){
            if(element!==undefined){
                 element = null; 
            }    
        });
    }

这会清除模型但不会更新视图。如何更新视图以使 Q2-4 为 clear/empty/blank？

我的想法是更新视图，所以

$scope.$watch( myModel, function(val){
    //set to null or delete?
}

但我不能概括这一点，所以它足够灵活，可以接受数组。任何意见，将不胜感激。谢谢

Answer 1

对于您的特定问题，我会使用 ui-router 并根据问题解决不同的状态，即 state.questions 并采用不同的参数，例如 url /questions 作为您的基本介绍页面（也许我们会提出问题或其他问题），您将有 /questions/1 并且它将是第一个问题 /questions/2 将是第二个等等... 然后在一些简单的服务上保留一个对象列表，即：

let questions = [];

它将在整个应用程序中持续存在，稍后会填充一些对象，例如：

{ 
q1: {
  answers: [1,2,3]
},
{
q2: {
  answers: [1,3]
}

您可以在完成后随时清除它或推送新答案。您还可以在加载状态之前检查特定答案，这将为您提供真正想要的灵活性。

好吧，对于丑陋的解决方案，如果您添加手表组和超时，您的手表可能会工作：

$scope.$watchGroup(arrayOfModels, (newVal, oldVal)=>{
  if(newVal) {
   // now do something you want with that models
   // if they don't apply, try $timeout(()=> $scope.$apply());
  }
})

在 AngularJS 中更新屏幕视图

Updating the view of a screen in AngularJS

javascript

angularjs

angularjs-scope