Angular $ watch <button> value

Question

我有两个按钮，就像收音机组一样。基本上：如果我点击一个按钮，它是活动的，它的值由Angular $ .watch（）监视。

我与真正的单选按钮做到了：

HTML

<form id="switch-view"> 
        <div class="radio-inline"> 
         <label> 
         <input type="radio" ng-model="srcUrl" name="optionsRadios" id="optionsRadios1" value="/me/has" checked="" > 
         Label 1 
         </label> 
        </div> 
        <div class="radio-inline"> 
         <label> 
         <input type="radio" ng-model="srcUrl" name="optionsRadios" id="optionsRadios2" value="/me/wants"> 
         Label 2 
         </label> 
        </div> 
       </form> 

角：

$scope.$watch('srcUrl', function() { 
    console.log($scope.srcUrl); 
    $http({ 
     method: 'GET', 
     url: $scope.srcUrl, 
     headers: { 
     'Accept': 'application/json' 
     } 
    }).then(function(res){ 
     $scope.items = angular.fromJson(res.data) 
      .sort($scope.SortByName) 
      .map(function(e){ 
       e.image = $sce.trustAsHtml(e.image); 
       return e; 
      }); 
     $scope.newItems = $scope.items; 
     if($scope.newItems.length === 0) { 
      $scope.message = ""; 
     } 
     //console.log($scope.items); 
     $scope.checkPagination(); 
    }); 
}); 

上面的代码按预期工作。现在我希望这与以下HTML一起使用：

<form id="switch-view"> 
        <button class="btn btn-primary active" id="dash-btn-collection" ng-model="srcUrl" value="/me/has">Label 1</button> 
        <button class="btn btn-primary violet" id="dash-btn-wantlist" ng-model="srcUrl" value="/me/wants">Label 2</button> 

       </form> 

任何想法？

Answer 1

所以，你想拥有像收音机行为，也许是这样的：

<form id="switch-view"> 
    <button class="btn btn-primary active" id="dash-btn-collection" ng-click="srcUrl = URL.HAS" ng-class="{'active': srcUrl == URL.HAS}">Label 1</button> 
    <button class="btn btn-primary violet" id="dash-btn-wantlist" ng-click="srcUrl = URL.WANTS" ng-class="{'active': srcUrl == URL.WANTS}">Label 2</button>  
</form> 

的CSS类“主动”表示当前激活按钮那里。

也许你想与ngClick

Answer 2

删除守望触发数据加载只需设置值可能就足够了：

<form id="switch-view"> 
    <button class="... active" id="dash-btn-collection" ng-click="srcUrl='/me/has' " >Label 1</button> 
    <button class="... violet" id="dash-btn-wantlist" ng-click="srcUrl='/me/wants' " >Label 2</button> 

</form>