Question

我尝试创建一个按钮，保存由复选框选择的选项，然后选择每个选项＆＃39;清除对象的值。

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}}表达式仍为空白。

Answer 1

您有很多格式错误。这是工作小提琴。 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);     
  }

Answer 2

我根据您的代码创建了一个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;
});
};

Answer 3

首先，您不应该使用相同的对象来表示提交的目标。

原因：您可以在键中输入内容＆＃34;提交＆＃34;每次选中该对象的复选框时，如果下次未选中该复选框，则必须清除＆＃34;提交＆＃34;值。

您的代码中存在以下错误 1）没有在html中定义的ng-app 2）缺少=在地点的ng-show签名

您可以在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);
    }



  });
};


}]);

角度按钮用于保存选定的选项

3 个答案: