html - How to add to a <ul> using Angularjs - upon click of button/user input entry? -
pls refer jsfiddle https://jsfiddle.net/sash2507/9g5c3f49/1/
i need way take user input (filename) input box - , add list item <ul>. thought .push directive work , ng-bind on <ul> of empty array variable? isn't working. appreciated, thanks.
///////////html/////////////
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/style.css"> <script `enter code here`src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script> <script src="js/main.js"></script> </head> <body ng-app="mymodule"> <div ng-controller="mycontroller ctrl"> <h2>folders</h2> <input type="checkbox" ng-model="ctrl.isboxchecked">expand <div ng-show="ctrl.isboxchecked"> <h2>folder 1</h2> <ul> <li>file 1.1</li> <li>file 1.2</li> <li>file 1.3</li> </ul> <h2>folder 2</h2> <ul> <li>file 2.1</li> <li>file 2.2</li> <li>file 2.3</li> </ul> <h2>folder 3</h2> <ul> <li>file 3.1</li> <li>file 3.2</li> <li>file 3.3</li> </ul> </div> <div> <span id="fileinputbox">file name: <input type="text" ng-model="somefilename" `enter code here`placeholder="enter file name" > <button ng-click="ctrl.onuserclick">add list</button> </span> </div> </body> </html> //////////////js////////////
var mymod = angular.module("mymodule", []); mymod.controller("mycontroller", function() { var self = this; // makes checkbox unchecked upon page load self.isboxchecked = false; // onuserclick fn makes value true ng-show self.onuserclick = function() { self.isboxchecked = !self.isboxchecked; self.somefilename = self.filenamesinlist; self.filenamesinlist.push({ self.somefilename }) }; // empty array file names self.filenamesinlist = []; }); ///////css//////////////
#fileinputbox { margin-left: 300px; position: fixed; }
you have syntax error in:
self.filenamesinlist.push({ self.somefilename }) you pushing object did not specify name of property
Comments
Post a Comment