Fatal编程技术网
  • angularjs/
  • 如何在AngularJS中通过单击来显示主/从复选框来设置小部件

如何在AngularJS中通过单击来显示主/从复选框来设置小部件

angularjs

如何在AngularJS中通过单击来显示主/从复选框来设置小部件,angularjs,angularjs-directive,angularjs-scope,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Scope,Angularjs Ng Repeat,我正试图为一个包含两个方面的小部件编写一个原型。左侧是兴趣组列表，右侧是相关的兴趣主题。i、 宠物在左边，鸟、狗、猫在右边。数据由对正在调用twitterapi的端点的AJAX调用填充 我不确定我是否正确地处理了这个问题，我想了解一些关于如何设置角度的建议。我计划使用与此类似的方法设置主/从复选框。下面是我当前的代码 index.html 你能把你自己的JSFIDLE和这段代码放在一起吗？您可以在其中硬编码json响应，以便页面正常工作。另外，当单击左侧的内容时，您是否正试图实现隐藏/显示右侧的

我正试图为一个包含两个方面的小部件编写一个原型。左侧是兴趣组列表，右侧是相关的兴趣主题。i、 宠物在左边，鸟、狗、猫在右边。数据由对正在调用twitterapi的端点的AJAX调用填充

我不确定我是否正确地处理了这个问题，我想了解一些关于如何设置角度的建议。我计划使用与此类似的方法设置主/从复选框。下面是我当前的代码

index.html

你能把你自己的JSFIDLE和这段代码放在一起吗？您可以在其中硬编码json响应，以便页面正常工作。另外，当单击左侧的内容时，您是否正试图实现隐藏/显示右侧的内容？您的问题并没有真正指定除了主/从复选框之外您尝试实现的功能。您可以检查Angular UI的主/从复选框功能。@EliteOctagon是的，这正是我试图做的。我现在就创建JS小提琴。从Dev Tools中的Angular Batamarang scope inspector中，我看到$scope.topics似乎与每个组隔离开来，因此ng click功能并没有更新我试图获得感兴趣的重复的顶级范围。不管我是否能使用这些功能，我仍然对我是否使用了正确的方法非常感兴趣，因为这是我的第一个角度项目。我很难让它工作，可能是因为外部js文件？在fiddle中，您正在向控制器中注入InterestService，但您在代码中注释掉了该服务。。。这是你的首字母problem@EliteOctagon刚刚更新了代码并删除了InterestService 
<!doctype html>
<html ng-app="interests">
<head>
    <meta http-equiv="Content-type" content="text/html" charset="utf-8">
    <title>Twitter Interests</title>

    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" content="text/css" href="stylesheets/style.css">
</head>
<body ng-controller="InterestController as interestCtrl">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <label>Interests</label>
                <input type="text" ng-model="search.$">
            </div>
        <div class="col-xs-6">
            <ul id="groups">
                <li group-listing group="{{ group }}" ng-repeat="group in (groups | filter: search) track by $index">
                </li>
            </ul>
        </div>
        <div class="col-xs-6">
            <div topic-listing topic="{{ topic }}" ng-repeat="topic in topics track by $index">
            </div>
        </div>
    </div>
</div>


    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <script src="javascripts/main.js"></script>
</body>
</html>

<div ng-click="showTopics(group)">{{ group }}</div>

<input type="checkbox" ng-model="topic.isChecked">{{ topic }}

var app = angular.module('interests', ['ngRoute']);

app.service('InterestService', ['$http', function ($http) {
    var getInterests = function (query) {
        return $http({
            method: 'GET',
            url: '/api/interests?=' + query
        });
    };

    return {
        getInterests: getInterests
    }
}]);

app.controller('InterestController', ['$scope', 'InterestService', function ($scope, InterestService) {
    var results = [];
    var interests = {};
    var resultArray;
    var group;
    var topic;

    $scope.topics = [];

    $scope.showTopics = function (group) {
        $scope.topics = interests[group];
    };

    InterestService.getInterests().then(function (result) {
        results = result.data.data;

        _.each(results, function (result) {
            resultArray = result.name.split('/');
            group = resultArray[0];
            topic = {};
            topic.name = resultArray[1];
            topic.isChecked = false;

            if (_.has(interests, group)) {
                interests[group].push(topic);
            } else {
                interests[group] = [];
                interests[group].push({ name: 'All of ' + group, isChecked: false });
                interests[group].push(topic);
            }
        });

        $scope.groups = _.keys(interests);
    });
 }]);

app.directive('groupListing', function () {
    return {
        restrict: 'EA',
        scope: {
            group: "@"
        },
        controller: 'InterestController',
        templateUrl: 'templates/groupListing.html'
    }
});

app.directive('interestListing', function() {
    return {
        restrict: 'EA',
        scope: {
            topic: "@"
        },
        controller: 'InterestController',
        templateUrl: 'templates/interestListing.html',
    }
});