16

Trueトランザクションタイプの値を設定する、またはFalseトランザクションタイプの値に基づくラジオボタンがあります

デモはここで見つけることができます

問題は、ラジオボタンのいずれかをクリックしても値が$scope.transaction.debit変わらないことです

私のJavaScriptコードは

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

    app.controller("MainCtrl", function($scope){
      $scope.transaction = {};
      $scope.transaction.debit=undefined;

      console.log('controller initialized');
    });

私が間違っていることを教えてください。

また、他の選択肢がない限り、この目的でAngular-UIorを使用したくありません。AngularStrap

4

9 に答える 9

11

dpinedaのソリューションを修正しました。bootsrap.js の依存関係を削除せずに使用できます。また、ここに実際の例があります。

フローは次のとおりです。

  1. data-toggle="buttons"ブートストラップの実行を防ぐために削除します。
  2. 壊れたビューを修正するための CSS を追加します (btn-radio css クラス)
  3. チェックされたスタイル効果のためにいくつかの AngularJS ロジックを追加します。

html

<div class="btn-group col-lg-3">
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '0'}">
    <input type="radio" data-ng-model="transaction.debit" value="0"> Debit
  </label>
  <label class="btn btn-default btn-radio" ng-class="{'active': transaction.debit == '1'}">
    <input type="radio" data-ng-model="transaction.debit" value="1"> Credit
  </label>
</div>

<p>Transaction type: {{transaction.debit}}</p>

JavaScript

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

app.controller("MainCtrl", function($scope) {

  $scope.transaction = {
    debit: 0
  };
});

スタイル

.btn-radio > input[type=radio] {
  position       : absolute;
  clip           : rect(0, 0, 0, 0);
  pointer-events : none;
}
于 2016-03-28T21:16:08.800 に答える
5

で問題が見つかりましたbootstrap.js。行をコメントするe.preventDefault()と、機能します。

// BUTTON DATA-API
// ===============
$(document)
.on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault() //Before
    //e.preventDefault() //After
})
.on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    $(e.target).closest('.btn').toggleClass('focus', /^focus(in)?$/.test(e.type))
})
于 2014-11-28T19:40:57.937 に答える
2

ブートストラップ コードを削除すると、条件付きでスタイルを制御できます

<label class="btn btn-default" ng-class="{'active': transaction.debit == 'some'}">
    <input type="radio" data-ng-model="transaction.debit" name="debit" value="some"> Some
</label>
<label class="btn btn-default" ng-class="{'active': transaction.debit == 'other'}">
    <input type="radio" data-ng-model="transaction.debit" name="debit" value="other"> Other
</label>
于 2014-09-11T17:54:13.087 に答える
2

ラジオ ボタンの上部に大きなラベルが貼り付けられているため、ラジオ ボタンへの入力が妨げられています。HTML は次のようになります。

 <input type="radio" data-ng-model="transaction.debit" value="True">Debit</input>

 <input type="radio" data-ng-model="transaction.debit" value="False">Credit</input>

もちろん、それはあなたが望むように見えないかもしれません。

于 2013-10-03T05:09:20.560 に答える
1

francisco.preller's answer に基づいて、入力タグを失うことなく、一般的な使用に適したものにするための 2 つのソリューションを作成しました: html:

        <label class="btn btn-info" radiobuttonlbl>
          <input ng-model="query.gender" type="radio" value="0">male
        </label>

ソリューション #1:

.directive("radiobuttonlbl", function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function () {
        var input_elem = angular.element(element.find('input')[0]);
        (function(o, s, v) {
          s = s.replace(/\[(\w+)\]/g, '.$1');
          s = s.replace(/^\./, '');
          var a = s.split('.').reverse();
          while(a.length>1) {
            var k = a.pop();
            o = o[k];
          }
          scope.$apply(function(){ o[a.pop()]=v;});
        })(scope, input_elem.attr('ng-model'), input_elem.attr('value'));
      });
    }
  };
})

解決策 2:

.directive("radiobuttonlbl", function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function () {
        var input_elem = angular.element(element.find('input')[0]);
        input_elem.prop('checked',true);
        input_elem.triggerHandler('click'); 
      });
    }
  };
})

アンギュラーが更新作業を行うため、最初の方が優れていると感じています。

于 2016-03-10T22:27:36.730 に答える
1

新しいディレクティブを使用した作業バージョンを次に示します。

html

<section ng-controller="MainCtrl">
<div class="form-group">
    <label class="col-lg-2 control-label">Type</label>

    <div class="btn-group col-lg-3" data-toggle="buttons">
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="True">
            Debit
        </label>
        <label class="btn btn-default" radio-button ng-model="transaction.debit" value="False">
            Credit
        </label>
    </div>

    <p>Transaction type: {{transaction.debit}}</p>
</div>
</section>

JavaScript

// Code goes here
var app = angular.module('myApp', []);

app.controller("MainCtrl", function($scope){
  $scope.transaction = {};
  $scope.transaction.debit=undefined;

  console.log('controller initialized');
});

app.directive("radioButton", function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function () {
        if (!element.hasClass('active')) {
          scope.$apply(function () {
            scope.transaction.debit = attrs.value;
          });
        }
      });
    }
  };
})
于 2013-10-03T05:44:58.597 に答える
0

誰かがまだこれを行う簡単な方法を探している場合 (私は個人的にコードにディレクティブをオーバーロードすることをためらっています)、私がしたことは次のとおりです。

ng-clickラベルを使用して値を設定できます。さらに、最初のラジオ アイテムのラベルにあるng-initandクラスに注目してください。activeこのようにして、bootstrap にその機能を実行させ、angular にその機能を実行させることができます。唯一の欠点は、ng-model を使用してこれを角度制御できないことです。

<div class="btn-group col-lg-3" data-toggle="buttons">
      <label class="btn btn-default active" ng-init="transaction.debit=true" ng-click="transaction.debit=true">
        <input type="radio" checked> Debit
      </label>
      <label class="btn btn-default" ng-click="transaction.debit=false">
        <input type="radio"> Credit
      </label>
    </div>
于 2019-12-01T22:52:55.220 に答える