0

にバインドされた 3 つの無線入力があります。ctrl.poiTypeここで、ctrlはコントローラーで、poiTypeは整数です。 ctrl.poiType4 つの定数 (ctrl.TYPE_TRIP、ctrl.TYPE_EVENT、ctrl.TYPE_POI) で指定された 3 つの値のいずれかを持つことができます。

そこで、次のように ng-model と ng-value を使用して、3 つの入力ラジオを作成しました。

<label class="btn btn-default">
    <input type="radio" autocomplete="off" 
           ng-value="ctrl.TYPE_TRIP"
           ng-model="ctrl.poiType"  
           ng-change="ctrl.alert()"/>itinerari
</label>

ng-modelの値がと等しいかどうか無線をチェックする必要がありますが、ng-value機能していません。どうしてか分かりません。

[更新] これは例の正しいJS Fiddleです

4

3 に答える 3

1

あなたが解決しようとしている問題は、クリックしたときに選択したボタンがアクティブに見えるようにすることだと思います。Bootstrap javascript コンポーネントを使用せずに Bootstrap スタイルを使用しているため、Angular 内でこれを機能させる必要があります。

ラジオ ボタンを「チェック済み」にするには、アクティブなスタイルをラベルのクラス リストに適用する必要があります。

事前選択されたオプションには .active が必要です

事前に選択されたオプションの場合、入力のラベルに .active クラスを自分で追加する必要があります。

Angular で要素のクラス リストを動的に変更する方法は、ng-classを使用することです。ディレクティブを機能させる方法にはいくつかのオプションがあるため、ディレクティブのドキュメントを読む必要があります。

ng-class ディレクティブを使用するように例を更新しました。ボタンをクリックすると、ボタンがアクティブに見えるようになりました。

このように正確に行うことはお勧めしません。特にコントローラーが CSS クラスを担当する部分についてはそうです。

意見

<div>poiType is initialized to 0, so the first button should be selected
    <div ng-controller="TodoCtrl as ctrl" style="margin-bottom: 5px; padding: 5px; width:100%;">
        <div class="btn-group btn-group-justified">
            <label ng-class="ctrl.class(ctrl.TYPE_POI)">
                <input type="radio" ng-value="ctrl.TYPE_POI" ng-model="ctrl.poiType" />POI</label>
            <label ng-class="ctrl.class(ctrl.TYPE_TRIP)">
                <input type="radio" autocomplete="off" ng-value="ctrl.TYPE_TRIP" ng-model="ctrl.poiType" />itinerari</label>
            <label ng-class="ctrl.class(ctrl.TYPE_EVENT)">
                <input type="radio" autocomplete="off" ng-value="ctrl.TYPE_EVENT" ng-model="ctrl.poiType" />eventi</label>
        </div>ctrl.poiType = {{ctrl.poiType}}</div>
</div>

コントローラ

angular.module('epoiApp', [])

    .controller('TodoCtrl', function () {
    this.poiType = 0; // first button should be selected

    this.TYPE_POI = 0;
    this.TYPE_TRIP = 1;
    this.TYPE_WAYPOINT = 2;
    this.TYPE_EVENT = 3;
    this.class = function (poiType) {
        if (poiType == this.poiType) {
            return 'btn btn-default active';
        } else {
            return 'btn btn-default';
        }
    }
});

これは、作業中のフィドルへのリンクです。

于 2015-07-10T14:25:14.820 に答える
0

私はそれを機能させました：

<div ng-app="myApp">
  poiType is initialized to 0, so the first button should be selected
  <div ng-controller="TodoCtrl"
       style="margin-bottom: 5px; padding: 5px; width:100%;">
    <div class="btn-group btn-group-justified" 
         data-toggle="buttons">
       <label class="btn btn-default">
          <input type="radio"  ng-value="TYPE_POI"
               ng-model="poiType" 
               ng-change="popup()"/>POI
        </label>
        <label class="btn btn-default">
           <input type="radio" autocomplete="off" 
                  ng-value="TYPE_TRIP ||
                            TYPE_WAYPOINT "
                  ng-model="poiType"  
                  ng-change="popup()"/>itinerari
        </label>
        <label class="btn btn-default">
          <input type="radio" autocomplete="off"  
                 ng-value="TYPE_EVENT"
                 ng-model="poiType" 
                 ng-change="popup()"/>eventi
        </label>    
     </div>         
   </div>         
</div>

angular アプリが参照するモジュールを作成する必要があります。ここでは、それを myApp と呼び、メインの div で宣言します (通常は body タグで行います)。次に、コントローラーを作成し、scopeモジュールを使用してデータを初期化し、上記のように使用できます。jsはこちら。

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

myApp.controller("TodoCtrl", function ($scope) {
    var that = $scope;

    $scope.poiType = 0;

    $scope.TYPE_POI = 0;
    $scope.TYPE_TRIP = 1;
    $scope.TYPE_WAYPOINT = 2;
    $scope.TYPE_EVENT = 3;

    $scope.popup = function () {
        alert(that.poiType);
    };
});

jsfiddle

于 2015-07-10T09:07:56.580 に答える
-1 
    <div class="btn-group btn-group-justified" 
             data-toggle="buttons">

data-toggle="buttons"ラジオボタンを非表示にしています。これを外すと表示されます

于 2015-07-10T08:56:48.997 に答える