如何将angularjs复选框放置?

时间:2019-01-24 10:53:12

标签: html angularjs

我有一个有效字段,该字段为true或false,我想用复选框替换文本

我希望在更改期间我可以单击复选标记,然后更改生效,即,如果复选框为true,则没有复选框,则为false

<div class="row">
<div class="col-lg-4 col-sm-12" style="margin: 15px">
    Активность Пользователя:
</div>
<div class="col-lg-6 col-sm-10" style="margin: 5px;">
        <textarea style="display: inline-block; width: 100%; height:3rem;  resize: none;" ng-model="user.active"
                  ng-if="editActive"/>
    <div ng-if="!editActive" style="display: inline-block; width: 100%; overflow-wrap: break-word">
        {{user.active}}
    </div>
</div>
<div class="col-lg-1 col-sm-1">
    <button ng-click="changeActive()"
            ng-if="editActive">
        <i class="glyphicon glyphicon-ok"
           style="size: 20px"/>
    </button>
    <button ng-click="changeActive()"
            ng-if="!editActive">
        <i class="glyphicon glyphicon-pencil"
           style="size: 20px"/>
    </button>
</div>

我这样做,但是没有保存

  <div class="row">
    <div class="col-lg-4 col-sm-11" style="margin: 15px">
        Активность Пользователя:
    </div>
    <div class="col-lg-6 col-sm-1" style="margin: 5px;">
        <input type="checkbox" ng-model="user.active">
    </div>
</div>

角度代码

(function () {
'use strict';

angular
    .module('marathon.controllers')
    .constant()
    .controller('EditUserCtrl', function ($scope, $stateParams, dialogs, $http, $alert, $state, $location, $window,
                                          dashboardService, defaultGridOptions, dateTimeFormat, appService) {
        $scope.getUser = function () {
            $http.post("http://localhost:9009/api/users/getUser", {id: $stateParams.id})
                .then(function (response) {
                    $scope.user = response.data;
                })
        };

        $scope.getUser();

        $scope.editFirstname = false;
        $scope.editLastname = false;
        $scope.editUsername = false;
        $scope.editEmail = false;
        $scope.editPassword = false;
        $scope.editActive = false;

        $scope.changeFirstname = function () {
            $scope.editFirstname = !$scope.editFirstname
        };
        $scope.changePassword = function () {
            $scope.editPassword = !$scope.editPassword
        };
        $scope.changeActive = function () {
            $scope.editActive = !$scope.editActive
        };
        $scope.changePassword = function () {
            $scope.editPassword = !$scope.editPassword
        };
        $scope.changeLastname = function () {
            $scope.editLastname = !$scope.editLastname
        };
        $scope.changeUsername = function () {
            $scope.editUsername = !$scope.editUsername
        };
        $scope.changeEmail = function () {
            $scope.editEmail = !$scope.editEmail
        };
        $scope.save = function () {
            if (!validateBeforeSave()) {
                $alert({
                    title: 'Заполните все поля',
                    content: $scope.user.username,
                    templateUrl: "alertTemplate.html",
                    duration: 5,
                    placement: 'top-right',
                    type: "danger",
                    show: true
                });
                return
            }
            dialogs.confirmation("Сохранить изменения в книге " + $scope.user.username + "?").then(function () {
                $http.post("http://localhost:9009/api/users/save", $scope.user)
                    .then(function (response) {
                        $alert({
                            title: '',
                            content: 'Пользователь сохранен',
                            templateUrl: "alertTemplate.html",
                            duration: 5,
                            placement: 'top-right',
                            type: "info",
                            show: true
                        });
                        $scope.user = response.data;
                        $state.go('app.dashboard');
                    })
            });


        };
        $scope.delete = function () {
            dialogs.confirmation("Удалить пользователя " + $scope.user.username + "?").then(function () {
                $http.post("http://localhost:9009/api/users/delete", $scope.user)
                    .then(function () {
                        $alert({
                            title: '',
                            content: 'Пользователь удален',
                            templateUrl: "alertTemplate.html",
                            duration: 5,
                            placement: 'top-right',
                            type: "info",
                            show: true
                        });
                        $state.go('app.dashboard');
                    })
            });
        };
        $scope.cancel = function () {
            dialogs.confirmation("Все несохраненные изменения будут удалены. Вернуться на главную страницу?").then(function () {
                $state.go('app.dashboard');
            })
        };


        function validateBeforeSave() {
            if (!$scope.user.firstName ||
                !$scope.user.lastName ||
                !$scope.user.username ||
                !$scope.user.email ||
                !$scope.user.password ||
                    !$scope.user.active||
                $scope.user.firstName.trim() == "" ||
                $scope.user.lastName.trim() == ""
                || $scope.user.username.trim() == ""
                || $scope.user.email.trim() == ""
                || $scope.user.password.trim() == ""||
                    $scope.user.active.trim() ==""
            ) {
                return false;
            }
            else return true;
        }
    });

})();

1 个答案:

答案 0 :(得分:1)

我解决了这个问题,不需要! $ scope.user.active || and $ scope.user.active.trim () == ""