Question

我正在尝试使用AngularJS构建一个小应用程序，它允许我使用单选按钮更改字体并查看它在相邻textarea中的外观。我有字体的值，但switch语句似乎没有接收到任何情况。请参阅下面的代码：

 <body ng-app="radioForm">
   <div class="container">
      <div class="row" ng-controller="fontController as fontController">
        <h1>Find Me a Font</h1>
          <div class="child">
            <div class="col-xs-6">
              <form role="form">
                <div class="radio">
                    <label id="fairytales">
                        <input type="radio" name="font" ng-model="formData.font" value="fairytales">
                            Fairytales
                    </label>
                </div>
                <div class="radio">
                    <label id="stump-closed">
                        <input type="radio" name="font" ng-model="formData.font" value="stump-closed">
                            Stump-Closed
                    </label>
                </div>
                <div class="radio">
                    <label id="amelia">
                        <input type="radio" name="font" ng-model="formData.font" value="amelia">
                        Amelia
                    </label>
                </div>
                <div class="radio">
                    <label id="brixton-lt">
                        <input type="radio" name="font" ng-model="formData.font" value="brixton-lt">
                        Brixton-LT
                    </label>
                </div>
                <div class="radio">
                    <label id="grounday">
                        <input type="radio" name="font" ng-model="formData.font" value="grounday">
                        Grounday
                    </label>
                </div>
            </form>
        </div>
        <div class="col-xs-6">
            <textarea>{{formData.font}}</textarea>
        </div>
    </div>
   </div>
 </div>

JS：

var radioForm = angular.module('radioForm', []);

    radioForm.controller('fontController', function($scope){
        $scope.formData = {
        };

        var chosenFont = $scope.formData.font;

        switch (chosenFont){
            case "fairytales":
                $('input[type=text], textarea').css('font-family', 'fairytales');
                break;
            case "stump-closed":
                $('input[type=text], textarea').css('font-family', 'stump-closed');
                break;
            case "amelia":
                $('input[type=text], textarea').css('font-family', 'Amelia-script');
                break;
            case "brixton-lt":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            case "grounday":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            default:
                $('input[type=text], textarea').css('font-family', 'sans-serif');

        }

        $( "input" ).on( "click", function() {
            console.log($scope.formData.font);
        });


    });

以下是codepen：http://codepen.io/tracyalison11/pen/BKZExL

Answer 1

使用ng-change指令，因为您希望在radio按钮值更改时执行操作。

试试这个：

var radioForm = angular.module('radioForm', []);

radioForm.controller('fontController', function($scope) {
  $scope.formData = {};

  $scope.changeRadio = function() {
    switch ($scope.formData.font) {
      case "fairytales":
        $('input[type=text], textarea').css('font-family', 'georgia');
        break;
      case "stump-closed":
        $('input[type=text], textarea').css('font-family', 'Palatino Linotype');
        break;
      case "amelia":
        $('input[type=text], textarea').css('font-family', 'Times New Roman');
        break;
      case "brixton-lt":
        $('input[type=text], textarea').css('font-family', 'brixton-lt');
        break;
      case "grounday":
        $('input[type=text], textarea').css('font-family', 'Arial');
        break;
      default:
        ('input[type=text], textarea').css('font-family', 'Comic Sans MS');
    }
  }

  $("input").on("click", function() {
    console.log($scope.formData.font);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<div ng-app="radioForm">
  <div class="row" ng-controller="fontController as fontController">
    <h1>Find Me a Font</h1>
    <div class="child">
      <div class="col-xs-6">
        <form role="form">
          <div class="radio">
            <label id="fairytales">
              <input type="radio" name="font" ng-model="formData.font" value="fairytales" ng-change='changeRadio()'>Fairytales
            </label>
          </div>
          <div class="radio">
            <label id="stump-closed">
              <input type="radio" name="font" ng-model="formData.font" value="stump-closed" ng-change='changeRadio()'>Stump-Closed
            </label>
          </div>
          <div class="radio">
            <label id="amelia">
              <input type="radio" name="font" ng-model="formData.font" value="amelia" ng-change='changeRadio()'>Amelia
            </label>
          </div>
          <div class="radio">
            <label id="brixton-lt">
              <input type="radio" name="font" ng-model="formData.font" value="brixton-lt" ng-change='changeRadio()'>Brixton-LT
            </label>
          </div>
          <div class="radio">
            <label id="grounday">
              <input type="radio" name="font" ng-model="formData.font" value="grounday" ng-change='changeRadio()'>Grounday
            </label>
          </div>
        </form>
      </div>
      <div class="col-xs-6">
        <textarea>{{formData.font}}</textarea>
      </div>
    </div>
  </div>
</div>

Codepen

Answer 2

获取单选按钮值存在一些问题。

 $(':radio').change(
        function(){
         switch (this.value){
            case "fairytales":
                $('input[type=text], textarea').css('font-family', 'fairytales');
                break;
            case "stump-closed":
                $('input[type=text], textarea').css('font-family', 'stump-closed');
                break;
            case "amelia":
                $('input[type=text], textarea').css('font-family', 'Amelia-script');
                break;
            case "brixton-lt":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            case "grounday":
                $('input[type=text], textarea').css('font-family', 'brixton-lt');
                break;
            default:
                $('input[type=text], textarea').css('font-family', 'sans-serif');

        }
        }
    );

我希望这会有所帮助。

Answer 3

另一种方法是使用类，不要在角度控制器中进行dom操作

var radioForm = angular.module('radioForm', []);

radioForm.controller('fontController', function($scope) {
  $scope.formData = {};


});

input[type="text"],
textarea {
  font-family: sans-serif
}
.fairytales input[type="text"],
.fairytales textarea {
  font-family: fairytales
}
.stump-closed input[type="text"],
.stump-closed textarea {
  font-family: stump-closed
}
.amelia input[type="text"],
.amelia textarea {
  font-family: Amelia-script
}
.brixton-lt input[type="text"],
.brixton-lt textarea {
  font-family: brixton-lt
}
.grounday input[type="text"],
.grounday textarea {
  font-family: brixton-lt
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="radioForm">
  <div class="container">
    <div class="row" ng-controller="fontController as fontController" ng-class="formData.font">
      <h1>Find Me a Font</h1>
      <div class="child">
        <div class="col-xs-6">
          <form role="form">
            <div class="radio">
              <label id="fairytales">
                <input type="radio" name="font" ng-model="formData.font" value="fairytales">Fairytales
              </label>
            </div>
            <div class="radio">
              <label id="stump-closed">
                <input type="radio" name="font" ng-model="formData.font" value="stump-closed">Stump-Closed
              </label>
            </div>
            <div class="radio">
              <label id="amelia">
                <input type="radio" name="font" ng-model="formData.font" value="amelia">Amelia
              </label>
            </div>
            <div class="radio">
              <label id="brixton-lt">
                <input type="radio" name="font" ng-model="formData.font" value="brixton-lt">Brixton-LT
              </label>
            </div>
            <div class="radio">
              <label id="grounday">
                <input type="radio" name="font" ng-model="formData.font" value="grounday">Grounday
              </label>
            </div>
          </form>
        </div>
        <div class="col-xs-6">
          <textarea>{{formData.font}}</textarea>
        </div>
      </div>
    </div>
  </div>
  The JS:

切换语句jQuery不适用于单选按钮值

3 个答案: