{"id":1975,"date":"2015-07-14T04:09:55","date_gmt":"2015-07-14T04:09:55","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=1975"},"modified":"2015-07-31T09:53:21","modified_gmt":"2015-07-31T09:53:21","slug":"reference-the-inputs-created-with-ng-repeat-in-angular-based-on-the-number-of-variable-options","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/stack-overflow\/reference-the-inputs-created-with-ng-repeat-in-angular-based-on-the-number-of-variable-options\/","title":{"rendered":"Reference the inputs created with ng-repeat in angular based on the number of variable options"},"content":{"rendered":"

\"profile<\/a>
\nI’m a big fan of Stack Overflow<\/a> and I tend to contribute regularly (am currently in the top 0.X%<\/a>).\u00a0In this category (stackoverflow<\/a>)\u00a0of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here<\/a>.<\/p>\n

My question<\/a> was:<\/p>\n

The problem I’m facing, as outlined in the code, is that I can’t seem to find out how to bind the second checkboxes (created with ng-repeat) to some model which I would then be able to use further down the code (showing\/hiding yet another set of options). Also, I managed to show the additional number of inputs based on the count<\/code> parameter in the $scope.availableOptions<\/code> by using the $scope.getItterator<\/code> function, but now I don’t see how would I access the values of these checkboxes? I know I have to somehow use the option “ng-model” but am failing to do so, so any help appreciated.<\/p>\n

My code is here<\/a>, but am showing it here too:<\/p>\n

HTML:<\/p>\n

<div ng-controller='MyCtrl'>\r\n    Show additional options <input type=\"checkbox\" ng-model=\"additionalOptions\">\r\n    <div ng-show=\"additionalOptions\">\r\n        <ul>\r\n            <li ng-repeat=\"option in availableOptions\">\r\n                <label class=\"checkbox\" for=\"opt_{{option.id}}\">\r\n                    <input type=\"checkbox\" name=\"opt_{{option.id}}\" id=\"opt_{{option.}}\" \/>\r\n                    {{option.name}}\r\n\r\n                    <ul ng-show=\"if the upper checkbox is clicked\">\r\n                        <li>\r\n                            <input type=\"text\" ng-repeat=\"i in getItterator(option.count)\" ng-model=\"SOME_VALUE_TO_BE_USED_BELOW\"\/>\r\n                            Output the value based on what's entered above in the textboxes (SOME_VALUE_TO_BE_USED_BELOW)\r\n                        <\/li>   \r\n                    <\/ul>\r\n                <\/label>\r\n            <\/li>\r\n        <\/ul>\r\n    <\/div>\r\n<\/div><\/pre>\n
and my js:<\/p>\n
function MyCtrl($scope) {\r\n    $scope.availableOptions = [{\"id\":\"1\",\"name\":\"easy\",\"count\":\"2\"},{\"id\":\"2\",\"name\":\"medium\",\"count\":\"3\"},{\"id\":\"3\",\"name\":\"hard\",\"count\":\"2\"}];\r\n\r\n    $scope.getItterator=function(n){\r\n        var a = new Array();\r\n\r\n        for(var i=1; i <= n; i++)\r\n            a.push(i);\r\n\r\n        return a;       \r\n    };\r\n}<\/pre>\n
The answer, by user Khanh TO<\/a>, was:<\/p>\n
Try ng-model=\"option.checked\"<\/code>:<\/p>\n
<input type=\"checkbox\" name=\"opt_{{option.id}}\" id=\"opt_{{option.}}\" ng-model=\"option.checked\"\/><\/pre>\n
And then you can access this property further below like this:<\/p>\n
<ul ng-show=\"option.checked\"><\/pre>\n
DEMO<\/a><\/p>\n
If you need to also reference the text box inputs. You create a new property (values<\/code>) on the option. Like this:<\/p>\n
{\"id\":\"1\",\"name\":\"easy\",\"count\":\"2\",values:[]}<\/pre>\n
Html:<\/p>\n
<div ng-repeat=\"i in getItterator(option.count)\">\r\n     <input type=\"text\"  ng-model=\"option.values[$index]\"\/>\r\n      {{option.values[$index]}}\r\n<\/div><\/pre>\n
DEMO<\/a><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%).\u00a0In this category (stackoverflow)\u00a0of posts I will will be posting…<\/p>\n","protected":false},"author":1,"featured_media":609,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44,35],"tags":[],"class_list":["post-1975","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-stack-overflow"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1975","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=1975"}],"version-history":[{"count":2,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions"}],"predecessor-version":[{"id":1977,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/1975\/revisions\/1977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/609"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=1975"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=1975"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=1975"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}