复选框都能绑定函数,但是ng-click=remSer()那个函数却执行不了

发布于 2022-09-03 09:48:30 字数 3231 浏览 16 评论 0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
    
</head>
<body ng-app="ruiyi" ng-controller="ServiceController">
    <section class="info">已选的服务</section>

    <section data-ng-repeat="sel in selected">
        <label><section ng-click="remServ(sel.name,sel.content)">{{sel.name}}<span class="close">X</span></section></label>
    </section>
    <div class="menu">
        <section class="info">选择所需要的服务类型</section>
        <section data-ng-repeat="serv in services">
            <label>
                <input type="checkbox" id={{serv.id}} name={{serv.name}} ng-checked="isSelected(serv.name)" ng-click="addServ($event,serv.name,serv.content)">{{serv.id}}
                {{ serv.name }}{{serv.content}}      
            </label>
        </section>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<style type="text/css"></style>

</html>

js

angular.module('ruiyi',[])
        .controller('ServiceController',function($scope){
            $scope.services=[
                {name:"航班",
                content:"航班查询:示例XXXX"},
                
                {name:"天气",
                content:"天气查询:示例XXXX"},
                
                {name:"行程",
                content:"行程查询:示例XXXX"},
                
                {name:"值机",
                content:"值机查询:示例XXXX"},
                
                {name:"笑话",
                content:"笑话查询:示例XXXX"},
                
                {name:"媒体",
                content:"媒体查询:示例XXXX"},
            ];
            $scope.selected = [],//存放已选择名称

            $scope.submitForm = function(){
                console.log("XXX")
            };

            $scope.addServ = function($event,name,content){
                var checkbox = $event.target
                var action = (checkbox.checked?'add':'remove');
                if(action==="add"){
                    $scope.selected.push({name:name,content:content})
                    for (var i = 0; i < $scope.services.length; i++) {
                        if($scope.services[i].name===name){
                            $scope.services.splice(i,1);
                            break;
                        }
                    }
                }
            }
            $scope.remServ = function(name,content){
                for (var i = 0; i < $scope.selected.length; i++) {
                    if($scope.selected[i]===name){
                        $scope.selected.splice(i,1)
                        var _sev = {
                            name:name,
                            content:content
                        }
                        $scope.services.push(_sev);
                    }
                }
            }
            $scope.isSelected = function(name){
                return $scope.selected.indexOf(name)>=0;
            }

})

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

雨落星ぅ辰 2022-09-10 09:48:30

ngclick和ngrepeat写在同一个dom里试试

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文