Add text depending on radio button selection (ANGULAR)

Question

I have radio buttons that when selected I want to add the text in the input box to the corresponding section's ul (as a list item)

<body ng-app="MyApp">
    <div ng-controller="MyController as myCtrl">
        <div class='wrap'>
                <p>Section 1<p>
                    <ul>
                        <li ng-repeat="item in myCtrl.items1">{{item}}</li>
                    </ul>
                <p>Section 2<p>
                    <ul>
                        <li ng-repeat="item in myCtrl.items2">{{item}}</li>
                    </ul>
                <p>Section 3<p>
                    <ul>
                        <li ng-repeat="item in myCtrl.items3">{{item}}</li>
                    </ul>
        </div>
        <div class='wrap'>
            File Name: <input type="text" ng-model="myCtrl.fileName">
            <button ng-click="myCtrl.addFile()">Add File</button>
            <div>
                <input type="radio" name="foldertoadd" ng-value="myCtrl.section1" ng-model="myCtrl.sectionSelected"> Section 1
                <input type="radio" name="foldertoadd" ng-value="myCtrl.section2" ng-model="myCtrl.sectionSelected"> Section 2
                <input type="radio" name="foldertoadd" ng-value="myCtrl.section3" ng-model="myCtrl.sectionSelected"> Section 3
            </div>
        </div>
    </div>
</body><!-- end of MyApp, angular ends here -->

Here is my controller. So far I have it set up to get the text from the input box and push it on to section 1's ul. But I want some way for the user to select a radio button to pick the section and then to push the input text onto that section's ul

var myModule = angular.module("MyApp", []);

myModule.controller('MyController', function(){

    var self = this;

    self.items1 = ["File 1.1","File 1.2","File 1.3"];
    self.items2 = ["File 2.1","File 2.2","File 2.3"];
    self.items3 = ["File 3.1","File 3.2","File 3.3"];

    self.sectionSelected = false;

    self.addFile = function() {
        var textAdded = self.fileName;
        self.items1.push(textAdded);
    }

});

I also set up a fiddle but can't get angular loaded: https://jsfiddle.net/RL_NewtoJS/tx7novnb/10/

E. Mourits · Accepted Answer · 2016-06-25 15:06:48Z

1

I got it working https://jsfiddle.net/tx7novnb/13/

The problem was the ng-value of the radiobutton:

<input type="radio" name="foldertoadd" ng-value="myCtrl.item1" ng-model="myCtrl.sectionSelected"> Section 1

and

self.addFile = function() {
    var textAdded = self.fileName;
    self.sectionSelected.push(textAdded);
}

answered Jun 25, 2016 at 15:06

E. Mourits

2852 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add text depending on radio button selection (ANGULAR)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related