選択した選択肢を保存する角度ボタン

私は、チェックボックスで選択された選択肢を保存し、オブジェクトの「選択された」各値をクリアするボタンを作成しようとしています。選択した選択肢を保存する角度ボタン

angular.module('app', []).controller('FormController', ['$scope', function($scope){ 

    $scope.goals = [{ 
      name: 'flex', 
      descrip: "Increase Flexibility", 
      selec: false, 
      submit: '' 
    }, 
    { 
      name: 'build', 
      descrip: "Build Muscle", 
      selec: false, 
      submit: '' 
    }, 
    { 
      name: 'cardio', 
      descrip: "Improve Cardio", 
      selec: false, 
      submit: '' 
    }, 
    { 
      name: 'lose',   
      descrip: "Lose Weight", 
      selec: false, 
      submit: '' 
    } 
    ]; 

$scope.submitGoals = function(){ 
    forEach($scope.goals, function(goal, key){ 
     $scope.goal.submit = $scope.goals.selec; 
     $scope.goal.selec = ''; 



    }); 
}; 


}]);

HTML：

<body ng-controller='FormController'> 
    <div class='container col-md-6 col-md-offset-6 panel' > 
    <form> 
     <span ng-repeat='goal in goals'> 
      <input type='checkbox' value='{{goal.name}}' name=selectedGoal[] ng-model='goal.selec'>{{goal.descrip}} 
     </span> 
     <input type='button' ng-model='submitGoals()' value='Submit'> 
    </form>  
</div> 

<pre> 
    You want to: 
     <p ng-repeat='goal in goals' ng-show='goal.selec'>{{goal.descrip}}<br></p> 

    <div class='panel-submit'> 
     You selected: <p ng-repeat='goal in goals' ng-show'goal.submit'>{{goal.submit}}</p> 

    </div> 

</pre> 

</body>

このsubmitGoals機能は、HTMLにおける{{goal.submit}}式は空白のままとして、値を保存するために動作しません。

出典

2016-06-12 MoSheikh

は、あなたがそれには、バックグラウンドを持っていない場合は、このような何かのためにいくつかのチュートリアルを研究提案します。これはチュートリアルサービスでもコード作成サービスでもありません – charlietfl

あなたが提出した目標を表すために同じオブジェクトを使用してはならないまず第一に。

理由：オブジェクトのチェックボックスをオンにするたびに「送信」キーに何かを入力できますが、次回にチェックを外すと「送信」値をクリアする必要があります。

以下のエラーが場所でNG-ショーでコード 1）欠落している）HTML 2で定義されていませんNG-アプリ=記号であった

あなたは、HTMLでこのような何かを行うことができます。

<body ng-app="app" ng-controller='FormController'> 
    <div class='container col-md-6 col-md-offset-6 panel' > 
    <form ng-submit="submitGoal()"> 
     <span ng-repeat='goal in goals'> 
      <input type='checkbox' ng-model="goal.selec">{{goal.descrip}} 
     </span> 
     <input type='submit' > 
    </form>  
</div> 

<pre> 
    You want to: 
     <p ng-repeat='goal in goals' ng-show='goal.selec'>{{goal.descrip}}<br></p> 

    <div class='panel-submit'> 
     You selected: <p ng-repeat='goal in selectedGoals'>{{goal.descrip}}</p> 

    </div> 

</pre> 

</body>

お使いのコントローラで

：

angular.module('app', []).controller('FormController', ['$scope',  function($scope){ 

    $scope.goals = [{ 
      name: 'flex', 
      descrip: "Increase Flexibility", 
      selec: false, 
      submit: '' 
    }, 
    { 
      name: 'build', 
      descrip: "Build Muscle", 
      selec: false, 
      submit: '' 
    }, 
    { 
      name: 'cardio', 
      descrip: "Improve Cardio", 
      selec: false, 
      submit: '' 
    }, 
    { 
      name: 'lose',   
      descrip: "Lose Weight", 
      selec: false, 
      submit: '' 
    } 
    ]; 

    $scope.selectedGoals = []; 

$scope.submitGoal = function(){ 
    angular.forEach($scope.goals, function(goal){ 

    if(goal.selec){ 
     $scope.selectedGoals.push(goal); 
    } 



    }); 
}; 


}]);

出典

2016-06-12 16:39:22

私は説明をありがとう、ありがとう！ – MoSheikh

フォーマットに間違いがありました。ここではフィドルが働いています。 http://jsfiddle.net/Lvc0u55v/5256/

値を反映するように1つの関数を変更しました。

$scope.submitGoals = function(goals){ 
    $scope.userGoals= []; 
    for(var x in $scope.goals) { 
     if($scope.goals[x].selec){ 
     $scope.userGoals.push($scope.goals[x].descrip);\\Creates array to display submitted values 
     $scope.goals[x].selec = false; // Clears selected values 
     } 
    } 
    console.log($scope.userGoals);  
    }

出典

2016-06-12 16:30:49 Don

ありがとうございました！ – MoSheikh

あなたのコードに基づいてプランナーを作成しました。多くの間違いがあるようです。両方の変更についてapp.jsとindex.htmlを確認してください。スクリプト内の

https://plnkr.co/edit/a6gNg5wE5C4S5SdCsht7?p=preview

<body ng-controller='FormController'> 
<div class='container col-md-6 col-md-offset-6 panel' > 
<form> 
    <span ng-repeat='goal in goals'> 
     <input type='checkbox' value='{{goal.name}}' name=selectedGoal[] ng-model='goal.selec'>{{goal.descrip}} 
    </span> 
    <input type='button' ng-click='submitGoals()' value='Submit'> 
</form>  
</div> 

<pre> 
You want to: 
<p ng-repeat='goal in goals' ng-show='goal.selec'>{{goal.descrip}}<br></p> 


You selected: 
<p ng-repeat='goal in goals' ng-show='goal.submit'>{{goal.descrip}}</p> 



</pre> 

</body>

$scope.submitGoals = function(){ 
angular.forEach($scope.goals, function(index,value){ 

console.log(index); 
console.log(index.submit); 
index.submit = index.selec; 
}); 
};

出典

2016-06-12 16:37:52 Deep

選択した選択肢を保存する角度ボタン

答えて

関連する問題