Ràng buộc nút radio không hoạt động khi thuộc tính chuyển đổi dữ liệu được thêm vào AngularJS + Bootstrap

Tôi đang sử dụng AngularJS cùng với Twitter Bootstrap và tôi muốn tạo hai nút radio trông giống như nút Bootstrap bình thường. Tôi tìm thấy this example trên jsFiddle và sau khi áp dụng nó vào trường hợp của tôi tất cả mọi thứ có vẻ tốt nhưng nó không hoạt động chính xác.Ràng buộc nút radio không hoạt động khi thuộc tính chuyển đổi dữ liệu được thêm vào AngularJS + Bootstrap

Tôi muốn liên kết các nút radio với mô hình trong Góc. Dưới đây là mã của tôi:

<div class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons"> 
    <label class="btn btn-default"> 
     <input type="radio" name="isMad" ng-model="isMad" ng-value="false" /> No 
    </label> 
    <label class="btn btn-default"> 
     <input type="radio" name="isMad" ng-model="isMad" ng-value="true" /> Yes 
    </label> 
</div> 

<h1> 
    I am mad: {{ isMad }} 
</h1>

Và đây là kết quả của cách nhấp vào "Không" (radio) nút:

Vì vậy, mô hình không bị ràng buộc gì cả. Khi tôi loại bỏ các thuộc tính dữ liệu chuyển đổi từ nhóm nút, mọi thứ hoạt động một cách chính xác nhưng các nút radio được hình dung chỉ trên đầu trang của các nút Bootstrap như trong ảnh này:

Tôi nên làm gì để có các nút Bootstrap trông như thế này trong hình đầu tiên và hoạt động chính xác với mô hình AngularJS ràng buộc như thế này trong mô hình thứ hai?

Nguồn

2015-10-06 Yulian

Bạn đã thử đặt id duy nhất cho từng yếu tố đầu vào chưa? – br3w5

@ br3w5 - yup, vẫn không hoạt động – Yulian

Góc cạnh và Bootstrap không phải lúc nào cũng chơi tốt với nhau ... https: //angular-ui.github.io/bootstrap/#/buttons cung cấp chỉ thị cho việc triển khai các nút radio với bootstrap và góc cạnh – br3w5

Mã hóa chính xác. có vẻ như bạn chưa sử dụng phiên bản Angulerjs thích hợp. bạn sử dụng phiên bản nào? thử với 1.3

Nguồn

2015-10-06 09:48:20 Nir

AngularJS v1.4.6 – Yulian

tôi đã thử với 1.3.8, cùng một mã hoạt động hoàn hảo cho tôi. – Nir

Đây là cách tôi đã thực hiện nó trên một dự án trước đó với một chỉ thị tùy chỉnh cho phạm vi xử lý. Sử dụng chỉ thị tùy chỉnh với phạm vi cách ly theo cách này là tùy chọn. Nó vẫn sẽ làm việc cho bạn bằng cách sử dụng ng-controller - sự khác biệt là thiết lập các nút radio trong bộ điều khiển không phải là html sau đó rendering bằng cách sử dụng ng-repeat. (working Plnkr)

radius.html

<div class="row"> 
    <div class="col-sm-12 col-md-12"> 
    <legend class="required">Choose a radius</legend> 
    </div> 
    <div class="col-sm-2 col-md-2"> 
    <fieldset> 

     <div class="form-group" ng-repeat="radius in vm.radiusValues"> 
      <div class="check-radio"> 
      <label for="{{ radius.id }}"> 
       <input type='radio' name="radio" id="{{ radius.id }}" value="{{ radius.value }}" ng-model="vm.radius">{{ radius.name }} 
      </label> 
      </div> 
     </div> 

    </fieldset> 

    <p>Selected value is {{ vm.radius }}</p> 

    </div> 
</div>

radius.directive.js

(function() { 
    'use strict'; 

    angular 
    .module('radius', []) 
    .directive('radius', radius) 
    .controller('RadiusCtrl', RadiusCtrl); 

    function radius() { 
     var directive = { 
      bindToController: true, 
      controller: 'RadiusCtrl', 
      controllerAs: 'vm', 
      replace: true, 
      restrict: 'E', 
      scope: {}, 
      templateUrl: 'radius.html' 
     }; 

     return directive; 
    } 

    function RadiusCtrl() { 
     var vm = this; 

     vm.radius = 500; 

     vm.radiusValues = [ 
      {name: '100m', value: 100, id: 'groupidrad1'}, 
      {name: '500m', value: 500, id: 'groupidrad2'}, 
      {name: '1000m', value: 1000, id: 'groupidrad3'}, 
      {name: '2000m', value: 2000, id: 'groupidrad4'} 
     ]; 
    } 
})();

Phần nội dung của index.html

<body> 
    <radius></radius> 
</body>

Nguồn

2015-10-06 12:32:50 br3w5

tôi đoán bạn không phải là người duy nhất đó là điên về vấn đề này. Hiện tại tôi đang gặp vấn đề tương tự.

Hãy để tôi chỉ workaround của tôi:

<div class="btn-group" > 
    <label class="btn btn-info" ng-class="{ active : model === 'value1'}"> 
     <input type="radio" ng-model="model" value="value1" class="hide"> value 1 
    </label> 
    <label class="btn btn-info" ng-class="{ active : model === 'value2'}"> 
     <input type="radio" ng-model="model" value="value2" class="hide"> value 2 
    </label> 
    </div>

Các keypoint hiểu, là để loại bỏ các dữ liệu toogle = "nút" Mà thêm lý javascript aditional gây ra lỗi. Và sau đó ẩn hộp kiểm với class = "hide" trong cùng một đầu vào và sau đó đặt trạng thái hoạt động "thủ công" theo giá trị của đối tượng mô hình sao lưu của bạn.

Hy vọng điều này sẽ giúp !.

Nguồn

2016-05-13 20:43:00 Victor

Ràng buộc nút radio không hoạt động khi thuộc tính chuyển đổi dữ liệu được thêm vào AngularJS + Bootstrap

Trả lời

Các vấn đề liên quan