Good day! In Angulyar novice, I perform the following task: there are questions, each question has its own checkbox, clicking which, in navigation, this issue somehow stands out, let's say, the background color changes. Here is approximately what is needed: 
I want to make navigation as an array of links, but I still have no considerations on how to synchronize checkboxes and links in navigation. As I understand it, we need one common array and one empty array, into which we drop the marked checkboxes and then pass this array to the links and no further idea what is happening. Any ideas, tips?
mandu mandu
3 one
- plnkr.co/edit/FzoV2BR14lNcSHLU1kXi?p=preview here I tried to combine the checkbox with a link, creating a new directive, but when I click the checkbox, all links are highlighted. - mandu
- everyone stands out because the isChecked property is one for all - Grundy
- too messy description, try to go with the description of the data that you have and how you want to show them and add it to the question - Grundy
|
2 answers
in the data array service which is used in both controllers, active_index passes the index of the selected array element from one controller to another through the service ...
(function() { 'use strict'; /*jslint browser:true */ var my_app; my_app = angular.module('my_app', []); my_app.service('Environment', ['$http', function($http) { var data = [{ q: '1 + 1', a: 2, opt: [1, 2, 3, 4, 5, 6], selected: false }, { q: '2 + 2', a: 4, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }, { q: '3 + 2', a: 5, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }, { q: '2 + 1', a: 3, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }, { q: '5 + 2', a: 7, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }, { q: '3 + 3', a: 6, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }, { q: '1 + 5', a: 6, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }, { q: '6 + 2', a: 8, opt: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], selected: false }], active_index; this.get_data = function() { return data; }; this.set_data = function(val) { data = val; }; this.get_active = function() { return active_index; }; this.set_active = function(idx) { active_index = idx; }; }]); my_app.controller('interface_controller', ['$scope', 'Environment', function($scope, Environment) { $scope.service = Environment; $scope.data = $scope.service.get_data(); $scope.active_index = $scope.service.get_active(); $scope.$watch('service.get_active()', function(newVal) { $scope.active_index = newVal; console.log('$scope.active_index', $scope.active_index); }); }]); my_app.controller('navigation_controller', ['$scope', 'Environment', function($scope, Environment) { $scope.service = Environment; $scope.data = $scope.service.get_data(); $scope.set_active = function(idx) { angular.forEach($scope.data, function(question, index){ if (index !== idx) { question.selected = false; } }); $scope.service.set_active(idx); } }]); }()); <!DOCTYPE html> <html> <head> <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> <script data-require="angularjs@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body> <div class="container" ng-app="my_app"> <div class="row"> <!--навигация--> <div class="col-xs-3" ng-controller="navigation_controller"> <div class="checkbox" ng-repeat="question in data"> <label> <input type="checkbox" ng-model="question.selected" ng-change="set_active($index)"> {{question.q}} </label> </div> </div> <!--панель--> <div class="col-xs-9" ng-controller="interface_controller"> <div class="panel panel-default"> <!-- Default panel contents --> <div class="panel-heading">Panel heading</div> <div class="panel-body"> <!-- List group --> <ul class="list-group" ng-repeat="question in data"> <li class="list-group-item " ng-class="{'active': $index == active_index}">{{question.q}}</li> <li class="list-group-item" ng-repeat="val in question.opt">{{val}}</li> </ul> </div> </div> </div> </div> </div> </body> </html> Something like this need?
Den den
412 2 12
- it would not be bad to add a description of what this code does - Grundy
- mmm, well, in the service array which is used in both controllers,
active_indexpasses the index of the selected array element from one controller to another through the service ... There code is 20-30 lines, the rest is array declaration - Den - Description is better to add an answer - Grundy
- Very close to what is needed, thank you very much, I will try to bring the code into the required form by myself - mandu
- @mandu if you write something, as I can answer. - Den
|
You can do it differently. The idea is this, and then give an example
- Navigation stored in the arrays. Once you want it.
- Create a $ scope.answer = {} // for storing the answers and the navigation id (This will be the key of the array column). After filling it will look like this $ scope.answer = {navigation_id: 1, text: 'b'}
- Then we hang events on them (On the onclick navigation - I suppose it will not be the select element, but on the onchange input event)
- When clicking on the navigation, we will write the onTabSelected (navigation_id) function, $ scope.answer.navigation_id = navigation_id, which we will send to the function.
- Actions with input are similar. In the onchange event, we write the onAnswerSelected () function, where we will check for the absence of values in $ scope.answer
- onAnswerSelected And in the same function can do anything
Implementation:
//Контроллер назовём словно AnswerController.js $scope.answer = {}; $scope.navigations = [ 'index1.html', 'index2.html', //... //... 'index12.html', ];//храним навигации HTML
Тут в цикле проходим по навигациям,и в каждой итерации задаём li обработчик передавая ему ключ в mассиве <ul> <li ng-repeat="nav in navigations" ng-click="onTabSelected(nav)">{{nav}}</li> </ul> при выборе какого либо input а автоматически значение пишется в наш $scop.answer.text = value,И им всем вешаем соответствующий один обработчик <input type="radio" ng-model="answer.text" value="one" ng-change="onAnswerSelected()" /> <input type="radio" ng-model="answer.text" value="two" ng-change="onAnswerSelected()" /> Back to our controller AnswerController
$scope.onTabSelected = function ( id ) { $scope.answer.navigation_id = id; } $scope.onTabSelected = function ( id ) { $scope.answer.navigation_id = id; } $scope.onAnswerSelected = function () { //тут проверить на пустоту $scope.answer //если все хорошо сделать что то,давайте отправим var data = { navigation : $scope.navigations[$scope.answer.navigation_id], answer : $scope.answer.text }; $http.post('/someUrl', data, config).then(successCallback, errorCallback); } The task was to show the train of thought or push for a better implementation, so do not judge too hard :) Good luck
Vanya Avchyan Vanya Avchyan
4,084 one 13 40
|