角度按鈕來保存選定的選項

我試圖創建一個按鈕來保存複選框選擇的選項，然後清除每個對象的「選定」值。角度按鈕來保存選定的選項

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功能不適用於保存值的工作，因爲{{goal.submit}}在HTML表達仍爲空白。

來源

2016-06-12 MoSheikh

建議你研究一些教程這樣的事情，如果你有它的背景。這不是一個教程服務或代碼寫作服務 – charlietfl

首先你不應該使用相同的對象來代表提交的目標。

原因：每次勾選該對象的複選框時，您都可以在「提交」鍵中輸入某些內容，但如果下次未選中該對象，則必須清除「提交」值。

下面的錯誤都在那裏你的代碼 1）在HTML 2中定義）缺失，無NG-應用等號（=）在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/

我修改了一個函數來反映值。

$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

我已經根據您的代碼創建了一個plunker。似乎有很多錯誤。請檢查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

角度按鈕來保存選定的選項

回答

相關問題