0

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>

それはうまくいきます！1つだけ問題があります。次のページに移動してから戻ると、入力フィールドが空です。実際、Laravelがデータの投稿と保存を処理するため、AngularJSモデルに入力データを保存したくありません。

私も ng-show を試しましたが、次をクリックすると ng-show がフォーム全体を送信します。

4

1 に答える 1

0

プランカーを持っていなかったので、別のプランカーを作成しました。ページ間を行ったり来たりするとどうなるか、スコープが破棄されるため、ロード時にデータを再入力する必要があります。

プランカーのリンク: 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 を作成します。初期化されていないため、最初の入力は切り替わりません。ユーザーが最初の入力に「blue」と入力すると、切り替えられ、他の入力では変更機能が実行されません。

入力を事前設定したい場合は、ページが読み込まれるときにそれを行う必要があります。これにより、タイムリーに行われます。

  $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 を検索) )

于 2014-12-17T19:27:38.927 に答える