angular.js - 复选框都能绑定函数,但是ng-click=remSer()那个函数却执行不了
阿神
阿神 2017-05-15 17:05:00
0
1
523
<!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>
    <p 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>
    </p>
</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;
            }

})
阿神
阿神

闭关修行中......

모든 응답(1)
洪涛

같은 DOM에서 ngclick과 ngrepeat를 작성해 보세요

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿