2016-06-13 33 views
0

我用这个guide来设计我的单选按钮。起初它似乎工作,但后来我意识到,ng模型不再工作了(它总是需要初始值)。它工作时,我离开了数据切换=“按钮”,但我有我的HTML复选框,我真的不知道如何摆脱他们。引导程序单选按钮数据toogle不能与ng-model配合使用

旧的HTML(作品)

 <div class="form-group"> 
      <label>Audio</label> 
      <div class="radio"> 
       <label> 
        <input type="radio" name="audio" value="real" ng-model="formData.audio" disabled> 
        Real Audio 
       </label> 
      </div> 
      <div class="radio"> 
       <label> 
        <input type="radio" name="audio" value="chariots" ng-model="formData.audio"> 
        Chariots of Fire 
       </label> 
      </div> 
      <div class="radio"> 
       <label> 
        <input type="radio" name="audio" value="benny" ng-model="formData.audio"> 
        Benny Hill 
       </label> 
      </div> 
     </div> 

新的HTML(不工作)

<div class="row"> 
     <div class="col-xs-12"> 
      <label>Audio</label> 
      <br> 
      <div class="btn-group" data-toggle="buttons"> 
      <label class="btn active"> 
       <input type="radio" name="audio" value="chariots" ng-model="formData.audio"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Chariots</span> 
      </label> 
      <label class="btn"> 
       <input type="radio" name="audio" value="benny" ng-model="formData.audio"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Benny Hill</span> 
      </label> 
      </div> 
     </div> 
    </div> 

这里是我的JS:

$scope.formData = { 
     audio: "chariots", 
     duration: "2", 
     frames: "1.0", 
     date: $filter('date')(now, "yyyy-MM-dd HH:MM:ss"), 
     filePath: "", 
    }; 

First row is without data-toggle="buttons".

任何建议?

回答

0

你肯定有控制台上WRT的依赖或JSON形成没有错误,因为以下似乎为我工作:

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn active"> 
     <input type="radio" name="audio" value="chariots" ng-model="formData.audio"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Chariots</span> 
     </label> 
     <label class="btn"> 
     <input type="radio" name="audio" value="benny" ng-model="formData.audio"><i class="fa fa-circle-o fa-2x"></i><i class="fa fa-check-circle-o fa-2x"></i><span> Benny Hill</span> 
     </label> 
    </div> 
    Selected : {{formData}} 
</div> 

和:

$scope.formData = { 
    audio: "chariots" 
}; 

注:希望你注入了$在你的控制器中进行过滤,以及filePath只是一个错字之后的额外逗号。

+0

哎呀......你说得对。可以看到,我添加了额外的bootstrap.js文件(另一个版本),这些文件显然搞砸了代码。现在它工作得很好。非常感谢。 – Stef

相关问题