angularjs收音机和复选框

Question

我正在尝试根据我选择的单选按钮和复选框（连接）来制作一个完整的字符串。

我有2个单选按钮组和一个复选框组;我的一个广播组工作得非常好，另一个没有我的电话自动选择一个值，对于复选框，当我选择一个时，它们都会被检查..

这是我的代码（html）：

<div class="choicesDiv">

        <div class="dayDiv">
          <h5>Jour</h5>
          <form action="">
            <input ng-model="resultD" type="radio" name="dayR" ng-value="dim" ng-change="dayResult(resultD)"> Dimanche<br>
            <input ng-model="resultD" type="radio" name="dayR" ng-value="lun" ng-change="dayResult(resultD)"> Lundi<br>
            <input ng-model="resultD" type="radio" name="dayR" ng-value="mar" ng-change="dayResult(resultD)"> Mardi<br>
            <input ng-model="resultD" type="radio" name="dayR" ng-value="mer" ng-change="dayResult(resultD)"> Mercredi<br>
            <input ng-model="resultD" type="radio" name="dayR" ng-value="jeu" ng-change="dayResult(resultD)"> Jeudi<br>
            <input ng-model="resultD" type="radio" name="dayR" ng-value="ven" ng-change="dayResult(resultD)"> Vendredi<br>
            <input ng-model="resultD" type="radio" name="dayR" ng-value="sam" ng-change="dayResult(resultD)"> Samedi<br>
          </form>
        </div>

        <div class="weekDiv">
          <h5>Semaine</h5>
          <form action="">
            <input ng-model="resultW" type="radio" ng-value="1" ng-change="weekResult(resultW)"> Semaine 1<br>
            <input ng-model="resultW" type="radio" ng-value="2" ng-change="weekResult(resultW)"> Semaine 2<br>
            <input ng-model="resultW" type="radio" ng-value="3" ng-change="weekResult(resultW)"> Semaine 3<br>
            <input ng-model="resultW" type="radio" ng-value="4" ng-change="weekResult(resultW)"> Semaine 4<br>
          </form>
        </div>

        <div class="timeDiv">
          <h5>Temps</h5>
          <form action="">
            <input ng-model="resultT" type="checkbox" name="timeRn" ng-value="N" ng-change="timeResult(resultT)"> Nuit<br>
            <input ng-model="resultT" type="checkbox" name="timeRj" ng-value="J" ng-change="timeResult(resultT)"> Jour<br>
            <input ng-model="resultT" type="checkbox" name="timeRs" ng-value="S" ng-change="timeResult(resultT)"> Soir<br>
            <input ng-model="resultT" type="checkbox" name="timeRts" ng-value="TS" ng-change="timeResult(resultT)"> Temps sup.<br>
          </form>
        </div>

      </div>

      <div class="btnSearchDiv" ng-click="showResults()">
        <h4>CHERCHER</h4>
      </div>

这是我的js（有角度的）：

$scope.dayResult = function(value) {
        day = value;
      };

      $scope.weekResult = function(value) {
        week = value;
      };

      $scope.timeResult = function(value) {
        time = value;
      };

      $scope.showResults = function() {
        totalQuery = day + week + time;
        window.alert(totalQuery);
      }

我的window.alert（totalQuery）只显示周和时间值，顺便说一下时间显示为“true”...我怎样才能得到day值以及复选框值作为我的设置值而不是“true” ？

请告诉我我哪里出错了，祝你有个美好的一天/傍晚/晚上

Answer 1

@chomaunte你可以尝试使用ng-repeat并编写可管理的代码..

angular
  .module('radioExample', [])
  .controller('ExampleController', ['$scope', function($scope) {

    $scope.days = [
      { id: 'dim', name: 'Dimanche' },
      { id: 'lun', name: 'Lundi' },
      { id: 'mar', name: 'Mardi' },
      { id: 'mer', name: 'Mercredi' },
      { id: 'jeu', name: 'Jeudi' },
      { id: 'ven', name: 'Vendredi' },
      { id: 'sam', name: 'Samedi' }
    ];

    $scope.weeks = [
      { id: '1', name: 'Semaine 1' },
      { id: '2', name: 'Semaine 2' },
      { id: '3', name: 'Semaine 3' },
      { id: '4', name: 'Semaine 4' }
    ];

    $scope.times = [
      { id: "N", name: "Nuit" },
      { id: "J", name: "Jour" },
      { id: "S", name: "Soir" },
      { id: "TS", name: "Temps sup" }
    ];

    $scope.toggleTime = function(time) {
      $scope.selectedTimes[time] = !$scope.selectedTimes[time];
    }

    /* setting default values ...*/
    $scope.selectedDay = $scope.days[0].id;
    $scope.selectedWeek = $scope.weeks[0].id;
    $scope.selectedTimes = {};
  }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="radioExample">
  <div ng-controller="ExampleController">
    <div class="dayDiv">
      <h5>Jour</h5>
      <div ng-repeat="day in days">
        <input ng-model="$parent.selectedDay" type="radio" name="day" ng-value="day.id" /> {{day.name}}
      </div>
    </div>

    <div class="weekDiv">
      <h5>Semaine</h5>
      <div ng-repeat="week in weeks">
        <input ng-model="$parent.selectedWeek" type="radio" ng-value="week.id" />{{week.name}}
      </div>
    </div>

    <div class="timeDiv">
      <h5>Temps</h5>
      <div ng-repeat="time in times">
        <input type="checkbox" ng-value="time.id" ng-checked="$parent.selectedTimes[time.id]" ng-click="$parent.toggleTime(time.id)" /> {{time.name}}
      </div>
    </div>

    <br/>
    <hr/>

    <div>Selected day : {{ selectedDay }}</div>
    <div>Selected week: {{ selectedWeek }}</div>
    <div>Selected times:
      <pre>{{ selectedTimes | json}}</pre>
    </div>
  </div>
</div>

Answer 2

您对组中的所有复选框使用相同的ng-model名称。这不是正确的实施方式。

编辑您的代码，如下所示。

<form action="">
            <input ng-model="resultD1" type="radio" name="dayR1" ng-value="dim" ng-change="dayResult(resultD1)"> Dimanche<br>
            <input ng-model="resultD2" type="radio2" name="dayR" ng-value="lun" ng-change="dayResult(resultD2)"> Lundi<br>
            <input ng-model="resultD3" type="radio3" name="dayR" ng-value="mar" ng-change="dayResult(resultD3)"> Mardi<br>
            <input ng-model="resultD4" type="radio4" name="dayR" ng-value="mer" ng-change="dayResult(resultD4)"> Mercredi<br>
            <input ng-model="resultD5" type="radio5" name="dayR" ng-value="jeu" ng-change="dayResult(resultD5)"> Jeudi<br>
            <input ng-model="resultD6" type="radio6" name="dayR" ng-value="ven" ng-change="dayResult(resultD6)"> Vendredi<br>
            <input ng-model="resultD7" type="radio7" name="dayR" ng-value="sam" ng-change="dayResult(resultD7)"> Samedi<br>
          </form>

确保你的ng-model是独一无二的

同时name属性也应该是唯一的。还有一件事......将相关参数传递给ng-change函数。

Answer 3

试试这个：

    <!doctype html>
    <html ng-app>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"></script>
    </head>
    <body>
        <div class="choicesDiv">
            <div class="dayDiv">
                <h5>Jour</h5>
                <form action="">
                    <input type="radio" ng-model="result.day" value="dim"> Dimanche<br>
                    <input type="radio" ng-model="result.day" value="lun"> Lundi<br>
                    <input type="radio" ng-model="result.day" value="mar"> Mardi<br>
                    <input type="radio" ng-model="result.day" value="mer"> Mercredi<br>
                    <input type="radio" ng-model="result.day" value="jeu"> Jeudi<br>
                    <input type="radio" ng-model="result.day" value="ven"> Vendredi<br>
                    <input type="radio" ng-model="result.day" value="sam"> Samedi<br>
                </form>
            </div>

            <div class="weekDiv">
                <h5>Semaine</h5>
                <form action="">
                    <input type="radio" ng-model="result.week" value="1"> Semaine 1<br>
                    <input type="radio" ng-model="result.week" value="2"> Semaine 2<br>
                    <input type="radio" ng-model="result.week" value="3"> Semaine 3<br>
                    <input type="radio" ng-model="result.week" value="4"> Semaine 4<br>
                </form>
            </div>

            <div class="timeDiv">
                <h5>Temps</h5>
                <form action="">
                    <input type="checkbox" ng-model="result.time.nuit" value="N"> Nuit<br>
                    <input type="checkbox" ng-model="result.time.jour" value="J"> Jour<br>
                    <input type="checkbox" ng-model="result.time.soir" value="S"> Soir<br>
                    <input type="checkbox" ng-model="result.time.tempssup" value="TS"> Temps sup.<br>
                </form>
            </div>
        </div>

        <div class="btnSearchDiv" ng-click="showResults()">
            <h4>CHERCHER</h4>
        </div>
</body>
</html>

ng-model将更新您的$ scope，因此您不需要使用ng-change，除非您在单击单选按钮/复选框时想要在$ scope中进行其他更改。您可以在$ scope.result.day，$ scope.result.week和$ scope.result.time中轻松访问控制器中的日，周和时间值。