javascript - Angular $watch <按钮> 值

Question

我有两个按钮，就像 radio 组一样。基本上:如果我点击一个按钮，它就会处于事件状态，并且它的值由 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>

Angular :

$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

所以你想要像 radio 一样的行为，也许像这样:

<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 类“active”表示当前事件按钮。

也许您想删除观察者并使用 ngClick 触发数据加载