Question

我目前正在尝试学习Angular并且我有一个产品列表，并且每个产品都可以被收藏，这将它们放在一个名为“收藏夹”的菜单中（它实际上是在db中插入一行，再次点击时它从db中移除。

功能已完成，我只想让按钮有两个“状态”（当产品被收藏时它应该是黄色的，当它不受欢迎时它应该是透明的）。

所以链接必须检查控制器返回true或false，具体取决于产品是否存在于db，table：Part_Favorites中。

CSS：

 .active { background:yellow;}
 .inactive { background:transparent;)

HTML：

 <a ng-click="myfavorites()">Add favorites</a>

控制器

$scope.myfavorites = function (parts) {

    CategoryService.myfavorites(parts, function (callback) {
        //$route.reload();
        window.location.reload(false);
    });

    if ($scope.loading == false) {
        item.Checked == true ? item.Checked = false : item.Checked = true;
        $scope.loopFilters();
        $rootScope.loading = true;
        $location.url('/Category/' + $routeParams.id + '/' + $scope.url);
    }
};

服务：

        myfavorites: function (data, callback) {
        $http.post(shopID + '/Product/MyFavourites?SalesPartNo=' + data).success(function (data) {
            callback(data)
        }).error(function (data) {
            callback(data);
        });
    },

编辑：用服务更新了我的帖子。仍然需要帮助！

代码有效，它会插入/删除到收藏菜单中。但是我怎么做它所以它改变了按钮上的类，取决于它是否被收藏？

Answer 1

<a ng-click="myfavorites()" ng-class="{active: item.Checked, inactive: !item.Checked}">Add favorites</a>

Answer 2

您可以稍微简化一下代码：

item.Checked = !item.Checked;
item.className = item.Checked ? "active" : "inactive";

我相信您可以直接在模板中打印课程：

{{className}}

所以它会自动在前端更新它。

Answer 3

您可以在此处使用ng-class。

检索项目时也会获得收藏信息。

$scope.retrieveItems = function() {
    //get the items with their favorite information(isFavorite [true,false])
}

然后在你的html：

<a ng-click="myfavorites()" ng-class="{'active':item.isFavorite, 'inactive':!item.isFavoirte"/>

Angular：添加产品作为收藏

3 个答案: