MoSheikh MoSheikh - 5 months ago 7
Javascript Question

Angular Button to save selected choices

I'm trying to create a button that saves the choices selected by checkboxes, then have each 'selected' value of the objects cleared.

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>


This submitGoals function doesn't work for saving the values, as the {{goal.submit}} expression in html remains blank.

Answer

First of all you should not use the same object to represent submitted goals.

Reason: You may enter something in key "submit" each time the checkbox for that object is checked, but then if the next time its unchecked, you will have to clear the "submit" value.

Following errors were there in your code 1) No ng-app defined in html 2) missing = sign in ng-show at places

You can do something like this in 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>

In your controller:

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);
    }



  });
};


}]);
Comments