2014-05-12 9 views
6

अपडेट नहीं करेगा मैं अपने कोड में एक रेडियो-बटन समूह देखना चाहता हूं। मैं AngularJs, कोणीय-पट्टा और बूटस्ट्रैप का उपयोग करें।कोणीय-पट्टा रेडियो बटन मॉडल

समस्या यह है कि जब मैं किसी अन्य बटन पर क्लिक करता हूं तो नियंत्रक में मेरे चर अद्यतन नहीं होंगे। डिफ़ॉल्ट मान सेट है। यदि मैं इनपुट टैग के चारों ओर लेबल हटा देता हूं, तो अद्यतन होता है ... मुझे नहीं पता कि यह एक बग है, या यदि मैं कुछ गलत कर रहा हूं ..

मुझे आशा है कि मैंने आपकी आवश्यक जानकारी प्रदान की है। किसी भी मदद के लिए धन्यवाद !!

संस्करण: AngularJS: 1.2.16 AngularStrap: 2.0.2 बूटस्ट्रैप: 3

HTML:

<link href="Content/bootstrap.min.css" rel="stylesheet" /> 
<link href="Content/style.css" rel="stylesheet" /> 
<link href="Content/bootstrap-additions.css" rel="stylesheet" /> 
<link rel="stylesheet" href="//rawgithub.com/mgcrea/angular-motion/master/dist/angular-motion.min.css"> 

रेडियो बटन:

<label class="control-label">Group By:</label> 

<div class="btn-group" ng-model="groupBy.value" data-bs-radio-group> 
    <label class="btn btn-default" for="all"> 
    <input name="all" type="radio" class="btn btn-default" value="all"> 
    All 
    </label> 

    <label class="btn btn-default" for="room"> 
    <input name="room" type="radio" class="btn btn-default" value="room"> 
     Room 
    </label> 

    <label class="btn btn-default" for="category"> 
    <input name="category" type="radio" class="btn btn-default" value="category"> 
     Category 
    </label> 
</div> 

प्रयुक्त पुस्तकालय:

<script src="libraries/angular.min.js"></script> 
<script src="libraries/jquery.min.js"></script> 

<!-- UI Libs --> 
<script src="libraries/bootstrap.min.js"></script> 
<script src="libraries/angular-strap.min.js"></script> 
<script src="libraries/angular-strap.tpl.min.js"></script> 

नियंत्रक:

$scope.groupBy = { 
    value: 'room' 
}; 

अद्यतन:

मॉड्यूल परिभाषा:

var app = angular.module('deviceApp', ['ngRoute','mgcrea.ngStrap','ngAnimate']); 
app.config(function ($routeProvider) { 
    $routeProvider 
    .when('/devices', 
     { 
      controller: 'DeviceController', 
      templateUrl: '/app/partials/devices.html' 
     }) 
    .otherwise({ redirectTo: '/devices' }); 
}); 

app.controller('DeviceController', function ($scope, $log, $alert, deviceService) { 
    $scope.groupBy = { 
    value: 'room' 
    }; 
... 

<html data-ng-app="deviceApp"> 
... 
+0

आपको लेबलों की विशेषता के लिए क्यों चाहिए? क्या आप उन्हें हटा सकते हैं? आप लेबल के लेबल के लिए आसानी से हटाकर कोड प्राप्त कर सकते हैं। –

+0

क्या आप दिखा सकते हैं कि आप अपने मॉड्यूल को कैसे परिभाषित करते हैं? – tasseKATT

+0

'for 'लेबल सिर्फ एक प्रयोग था। मैंने सोचा कि शायद यह रेडियो-इनपुट पर क्लिक को आगे बढ़ाएगा ... यह इसके बिना भी काम नहीं करता है। – Bagorolin

उत्तर

13

के बाद मैं इस काम के देखा plnkr मैं हिस्सा द्वारा हिस्सा इसे में मेरी कोड चिपकाया। के बाद से यह अभी भी काम किया मैं feeled जैसे मैं pranked या कुछ और ... गया

तो बाद एक loooooong परीक्षण और त्रुटि चरण मैं अंतर की खोज की ....

अगर मैं शामिल jquery.js के बाद मैं bootstrap.min.js को शामिल करता हूं मुझे त्रुटि मिलती है, बूटस्ट्रैप की जावास्क्रिप्ट को jQuery की आवश्यकता होती है। इसके परिणामस्वरूप, बूटस्ट्रैप को सही शामिल नहीं किया गया था और सबकुछ काम करता था।

कुछ समय में मेरे विकास में मुझे Bootstrap.min.js की आवश्यकता थी, लेकिन मैंने देखा, मुझे अब इसकी आवश्यकता नहीं है। शायद कुछ अन्य फाइल अब वह काम करती है। तो bootstrap.min.js फ़ाइल को हटाने से समस्या हल हो गई।

+1

धन्यवाद। आपने मुझे शोध के घंटे बचाए :)। –

+3

कमाल! ऐसा लगता है कि कोणीय पट्टा को bootstrap.js की आवश्यकता नहीं है। हालांकि मुझे दस्तावेज़ों में इसका कोई संकेत नहीं मिला। –

संबंधित मुद्दे