AngularJS：ng-switch 从输入字段中删除数据答案

【问题标题】：AngularJS: ng-switchs removed data from input fieldsAngularJS：ng-switch 从输入字段中删除数据
【发布时间】：2014-12-17 14:38:32
【问题描述】：

我有一个 Laravel 应用程序，我想通过向导添加用户和学校。我用 AngularJS 做了一个非常简单的向导。

$scope.addSchool = {
    items : [ 1, 2, 3 ],
    current : 1,
    progress : 0
}

$scope.addSchoolNext = function(next)
{
    $scope.addSchool.current = next;
    $scope.addSchool.progress = (100 / $scope.addSchool.items.length) * ($scope.addSchool.current - 1);
}

$scope.addSchoolPrevious = function(previous)
{
    $scope.addSchool.current = previous;
    $scope.addSchool.progress = (100 / $scope.addSchool.items.length) * ($scope.addSchool.current - 1);
}

我的视图中有 ng-switch：

 <div class="create-school-wizard" ng-switch on="addSchool.current">
      <section class="create-school-wizard-1" ng-switch-when="1">
           Add data
           <button class="btn btn-default" ng-click="addSchoolNext(2)">Next</button>
       </section>
       <section class="create-school-wizard-2" ng-switch-when="2">
            Add data
            <button class="btn btn-default" ng-click="addSchoolPrevious(1)">Previous</button>
            <button class="btn btn-default" ng-click="addSchoolNext(2)">Next</button>
       </section>
       <section class="create-school-wizard-3" ng-switch-when="3">
            Add data
            <button class="btn btn-default" ng-click="addSchoolPrevious(2)">Previous</button>
            <button class="btn btn-default">Save</button>
        </section>
 </div>

效果很好！我只有一个问题。当我转到下一页然后返回时，输入字段为空。实际上，我不想将我的输入数据保存在 AngularJS 模型中，因为 Laravel 负责发布和保存数据。

我也试过ng-show，但是当我点击next时，ng-show会提交整个表单。

【问题讨论】：

您的输入数据不会在 Angular 模型中“保存”，它会在页面加载时加载到其中。唯一的另一种方法是在输入上使用 value={{myValue}} 。顺便说一句，您没有在 HTML 中显示任何输入

标签： javascript angularjs ng-switch

【解决方案1】：

由于您没有 plunker，所以我创建了一个不同的。当您在页面之间来回切换时会发生什么情况，范围会被破坏，因此您需要在加载时重新填充数据。

Plunker 链接：http://plnkr.co/edit/laSUM6RDcF4SeTzMSCIu?p=preview

  <div ng-switch on="someVariableToSwitchOn">
    <div ng-switch-when="true">
      <input ng-model="data.value" />
    </div>
    <div ng-switch-default>
      <input ng-model="data.value" placeholder="Not prepopulated" ng-change="onChange()"/>
    </div>
  </div>

  <input ng-model="data.prepopulated"/>

在这个示例中，您可以看到我可以在输入上设置 ng-model，它将绑定到我的范围变量。

我的 JS 有点过于复杂，但基本可以理解。当页面加载时，我创建 $scope.data。它没有初始化，所以第一个输入不会切换。一旦用户在第一个输入中输入“蓝色”，它将切换并执行另一个输入不会运行更改功能。

如果我想预先填充一些输入，那么我必须在页面加载时执行此操作，以便及时完成。

  $scope.someVariableToSwitchOn = false;
  $scope.data = {};

  $scope.onChange = function(){
    if($scope.data.value === 'blue'){
      $scope.someVariableToSwitchOn = true;
      console.log('switched');
    } else {
      $scope.someVariableToSwitchOn = false; 
    }
  };

  $scope.data.prepopulated = "prepopulated";

您可以通过某种方式预先填充这些字段，您可以使用 $http 从您的服务器获取数据，或者您可以在浏览器中使用 localStorage 保存数据（如果您只是在页面之间移动而不依赖于服务器来保存这个（搜索 ng-localstorage））

【讨论】：