I've got an angular app I'm working on where I'm trying to auto fill a pop up modal based on a user's selection.
I thought I could use my model service to keep track of what the user selected and 'wire' the controller for the <select> list and it's edit button to the model but that doesn't seem to work.
Adding to the complexity I'm using angular-route and my <select> list is buried in a view. I was trying to keep my pop up modals in a separate controller outside the view because they've got their own templates and I had problems when I nested them into the view...
I've seen a few examples of wiring up angular apps and thought I understood them but I can't figure out what I'm doing wrong.
EDIT (thanks Pankaj Parkar for pointed out my mistakes in the plunker):
I have a plunker here:
https://plnkr.co/edit/6f9FZmV8Ul6LZDm9rcg9?p=preview
Below is the snipped in a single HTML page with CDN links :).
Am I just completely misunderstanding how angularjs is suppose to work?
<html ng-app="myApp">
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div ng-view></div>
<script id="editables.html" type="text/ng-template">
<div class="container">
<div class="jumbotron">
<form>
<div class="form-group">
<select class="form-control" id="mapsSelect" size="10" multiple ng-model="model.selected">
<option ng-repeat="n in editables">{{n}}</option>
<select>
</div>
<a href="#editModal" class = "btn btn-info" data-toggle="modal" ng-click="edit()" >Edit</a>
</form>
</div>
</div><!--end container div-->
</script>
<div ng-controller="modalsController">
<div id="editModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name" class="col-lg-3 control-label">Name</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="name" ng-model="formModel.name"></input>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-3 control-label">Description</label>
<div class="col-lg-9">
<input type="text" class="form-control" id="desc" ng-model="formModel.desc"></input>
</div>
</div>
<div class="modal-footer">
<pre> {{ formModel | json }}<br><br>Working: {{ workingMap }}</pre>
Cancel
Continue
</div>
</form>
</div>
</div>
</div><!-- end modal -->
</div>
</body>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src = "js/script.js"></script> -->
<script>
var app = angular.module('myApp', ['ngRoute']);
var modelService = function ($log){
var moduleHello = function(myMessage){
console.log("Module hellow from myService " + myMessage);
}
var moduleNames = {
"First" : {desc: "First's Description"},
"Second" : {desc: "Second's Description"},
"Third" : {desc: "Third's Description"}
};
var moduleWorkingName = {};
return {
hello: moduleHello,
editables: moduleNames,
workingName: moduleWorkingName
}
}//end modelService
app.factory("modelService", ["$log", modelService]);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/editables', {
controller: "editablesController",
templateUrl: "editables.html"
}).
otherwise({
redirectTo: "/editables"
});
}]);
app.controller('editablesController', ['$scope', '$log','modelService', function($scope,$log, $modelService) {
$scope.model = {};
//console.log( JSON.stringify( $modelService.editables ) );
$scope.editables = [];
for ( name in $modelService.editables){
$scope.editables.push( name );
}
$scope.edit = function(){
if ( typeof $modelService.editables [$scope.model.selected] != 'undefined'){
$modelService.workingName = $modelService.editables [$scope.model.selected];
console.log ("Setting my working name to " + JSON.stringify( $modelService.workingName ) );
}else{
console.log ("Nothing Selected");
}
}
}]);
app.controller('modalsController', ['$scope','modelService', function($scope,$modelService) {
$scope.formModel = {};
$scope.formModel.name = "Hard coding works of course";
$scope.formModel.desc = $modelService.workingName.desc; //But I can't seem to get this to update. I thought pointing it at an object in the Model would be enough.
console.log("Firing up modalsController");
}]);
</script>
</html>
I spent the last two days mulling over this in my head and I think I figured it out. For starters, here's the (working) plunker:
https://plnkr.co/edit/Kt3rebPtvGTt0WMXkQW4?p=preview
Now, the explanation. I was trying to keep a separate 'formModel' object that kept track of the controller's state. But that's both silly and pointless.
Instead what you're supposed to do is:
a. Create an object in your service to hold all your data (I just called this 'model')
b. For each controller that needs to share data create a variable on the $scope of the controller and point it to your 'model' variable from your service.
c. after that use the variables from your model in your html.
So in both my controllers you'll find this line:
$scope.model = $modelService.model;
and in my HTML you'll find stuff like this:
<input type="text" class="form-control" id="name" ng-model="model.workingName.name"></input>
notice how I'm using "model.workingName.name"? This references $scope.model.workingName.name, which thanks to the line $scope.model = $modelService.model from my JavaScript now points directly to my model.
And that is how you "wire up" Angular.
By the way, experienced Angular folks have probably noticed that this part:
$scope.editables = [];
for ( name in $modelService.model.names){
$scope.editables.push( name );
}
probably belongs in a directive instead of a controller because I'm editing the DOM.
Stuff like that's what makes it so hard to learn AngularJS. There's so many concepts to get the hang of.
Related
I need to access the form data (ng-model="name") in the parent controller DynamicFormCtrl . How do i access the data input in the form in the DynamicFormCtrl . I am not getting idea how to i access them.Though the data can be accessed in their own scopes.
<body ng-app="exampleApp" ng-controller="DynamicFormCtrl as ctrl">
<div>
<button ng-click="ctrl.addForm(0)">Form One</button> //add form1
<button ng-click="ctrl.addForm(1)">Form Two</button> //add form 2
<button ng-click="ctrl.addForm(2)">Form Three</button>// add form 3
</div>
<div ng-repeat="form in ctrl.displayedForms track by $index"> //display form on button press
<ng-include src="form"></ng-include> //Include from from the Script
</div>
<script type="text/ng-template" id="form1.tpl.html">
<label>
{{name}}
Form one is an input: <input type="text" ng-model="name"/>
</label>
</script>
<script type="text/ng-template" id="form2.tpl.html">
<label>
Form two gives you choices: <input type="radio"/> <input type="radio"/>
</label>
</script>
<script type="text/ng-template" id="form3.tpl.html">
<button>Form three is a button</button>
</script>
<script type="text/javascript">
angular.module("exampleApp", [])
.controller("DynamicFormCtrl", function($scope) {
var ctrl = this;
$scope.form_name = $scope.name;
console.log($scope.form_name);
var forms = [
"form1.tpl.html",
"form2.tpl.html",
"form3.tpl.html",
];
ctrl.displayedForms = [];
ctrl.addForm = function(formIndex) {
ctrl.displayedForms.push(forms[formIndex]);
}
});
</script>
</body>
As you are using the controller-as syntax you should use ctrl.name in the input field
<input type="text" ng-model="ctrl.name"/>
In the controller you can then use the input by using ctrl.name
You then also do not need to inject the scope as you use the controller-as syntax.
For further reading to controller-as I recommend
https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
I'm facing a problem in AngularJS and I'm not able to solve it.
I have a simple search bar in my html code :
<html ng-app="webApp">
<body>
<div class="row" ng-controller="IndexController">
<div class="col-lg-6 col-lg-offset-3 text-center">
<form>
<div class="input-group">
<input type="text" class="form-control" id="search_input" placeholder="Search for..." ng-model="search">
<span class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="research()"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
Search : {{search}}
<span ng-bind="search"></span>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./static/javascripts/angular/angular.module.js" type="text/javascript"></script>
<script src="./static/javascripts/angular/controllers/index.controller.js" type="text/javascript"></script>
</html>
My module is declared in an external file :
angular.module('webApp', ['ui.bootstrap', 'elasticsearch', 'angular-highlight']);
I have a simple controller which is binding the value from a search bar :
angular.module('webApp').controller('IndexController', IndexController);
function IndexController($scope, $window, $http) {
$scope.search = '';
$scope.research = function(){
console.log($scope.search);
window.location.href = "http://localhost:4000/results?search=" + $scope.search + "&size=20";
};
}
So my problem is that I my variable search is well rendered in the ng-bind directive but not at all between {{ }}. I have no errors in my console.
Would you have an idea why ?
Thank you in advance for your help.
Regards
Be aware of "scope soup". Since you are passing modules into your application, there is a possibility of an non-aliased controller having the same $scope.search variable. I recommend aliasing your controller on the markup [ex. IndexController as IndexCtrl] and in the controller change $scope to a this reference.
Example:
var vm = this; //preference
this.search = '';
this.research = function(){
console.log(vm.search);
window.location.href = "http://localhost:4000/results?search=" + vm.search + "&size=20";
};
Additionally, you would then reference the search variable in your markup like this:
search: {{IndexCtrl.search}}
Depending on you intent, you may also want to inject the $location service into your controller and replace window.location.href(...) with $location.path(...)
Remember that ngBind is for one-way binding where as ngModel is for two-way binding!
I have a problem to show INPUT field when do some action.
I have BUTTON (Click here) as soon as user made a click event on button i wanted to show input field
I have done this by using jQuery.
Can any one help me in Angular.js
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.boxShow = false;
});
</script>
<div ng-app="myApp">
<div ng-controller="myCtrl">
show box
<div ng-show="boxShow">
<textarea rows="4" cols="50">text</textarea>
</div>
</div>
</div>
https://jsfiddle.net/bxwjpmaa/1/
HTML
<div class="btn btn-primary" ng-click="openTextBox();">Click Me To open text box</div>
<div ng-show="openTextBox == true">
<input type="text"/>
</div>
SCRIPT :
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
please don't take scope variables and function names same
example here
$scope.openTextBox = function () {
$scope.openTextBox = true;
}
//this is not correct as per angular documentation because scope.openTextBox name already assigned to scope function,again its assigning scope variable "$scope.openTextBox = true" here u will get errors when ever u clicked div second time" TypeError: boolean is not a function" it will throw this error.so please dont use which is already assigned scope function dont assign scope variable
see this fiddle url : https://jsfiddle.net/veerendrakumarfiddle/bxwjpmaa/2/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ol>
<li ng-repeat="element in elements">
<input type="text" ng-model="element.value"/>
</li>
</ol>
<br/>
<b>Click here to add Textbox:</b><br/><input type="button" value="New Item" ng-click="newItem()"/>
<br/>
<br/>
<b>Click here to see ng-model value:</b><br/>
<input type="button" value="submit" ng-click="show(elements)">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var counter=0;
$scope.elements = [ {id:counter, value : ''} ];
$scope.newItem = function(){
counter++;
$scope.elements.push( { id:counter,value:''} );
}
$scope.show=function(elements)
{
alert(JSON.stringify(elements));
}
});
</script>
</body>
</html>
I have a form that is spread over multiple tabs. Originally, I used the tabset directive from ui-bootstrap, but then came the requirement to deep link to a specific tab, so I thought I'd use nested views from ui-router.
The problem I have is that the parent form is only valid when all the sub-forms are valid, but using ui-router states, only one sub-form is loaded at a time.
Here's an example to clarify
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<script src="script.js"></script>
</head>
<body class="container-fluid">
<div ui-view>
<ul class="list-unstyled">
<li><a ui-sref="edit.basic">Basic</a></li>
<li><a ui-sref="edit.extended">Extended</a></li>
</ul>
</div>
</body>
</html>
script.js
angular.module('app', ['ui.router']).
config(function($stateProvider) {
$stateProvider.state('edit', {
abstract: true,
url: '/edit/',
templateUrl: 'edit.html',
controller: function($scope) {
$scope.model = {};
}
}).
state('edit.basic', {
url: '/basic',
templateUrl: 'basic.html'
}).
state('edit.extended', {
url: '/extended',
templateUrl: 'extended.html'
});
});
edit.html
<div class="row" ng-form="editForm">
<div class="col-xs-12">
<ul class="nav nav-tabs">
<li ui-sref-active="active">
<a ui-sref="edit.basic">Basic</a>
</li>
<li ui-sref-active="active">
<a ui-sref="edit.extended">Extended</a>
</li>
</ul>
</div>
<div class="col-xs-12" ui-view></div>
<div class="col-xs-12">
<button type="button" class="btn btn-primary" ng-disabled="editForm.$invalid">Save</button>
</div>
<div class="col-xs-12">
<hr>
<tt>model = {{model}}</tt><br>
<tt>editForm.$valid = {{editForm.$valid}}</tt><br>
<tt>editForm.basicForm.$valid = {{editForm.basicForm.$valid}}</tt><br>
<tt>editForm.extendedForm.$valid = {{editForm.extendedForm.$valid}}</tt>
</div>
</div>
basic.html
<div ng-form="basicForm">
<div class="form-group">
<label for="textProperty">Text Property</label>
<input type="text" class="form-control" name="textProperty" id="textProperty" ng-model="model.textProperty" required>
</div>
</div>
extended.html
<div ng-form="extendedForm">
<div class="form-group">
<label for="numericProperty">Numeric Property</label>
<input type="number" class="form-control" name="numericProperty" id="numericProperty" ng-model="model.numericProperty" required>
</div>
<div class="form-group">
<label for="dateProperty">Date Property</label>
<input type="date" class="form-control" name="dateProperty" id="dateProperty" ng-model="model.dateProperty" required>
</div>
</div>
I am beginning to believe that this approach is not suitable for my purpose. Instead of using nested views, I should continue to use the tabset and use a state parameter to activate the appropriate tab.
I'm interested to know how others would solve it.
UPDATE 1:
Here is one solution I came up with that uses the ui-bootstrap tabset but doesn't use nested ui-router states and instead parameterises the active tab.
UPDATE 2:
Here is a solution which uses nested states along with a validator service following the suggestion of Santiago Rebella
UPDATE 3:
Here is an alternate solution to update 2 which uses a validator object on the parent state's scope for comparison
You could try to do it in the way you state just passing to a service some kind of attributes like step1, step2, etc and go adding true or whatever your success value you may use, so once all those attributes are true, in your ng-disabled or the way you are building your form, is allowed to be submitted.
Maybe previous formsteps you could be storing the values of the inputs in an object in your service. I think in this way you could a multi-page form.
controller.js
var app = angular.module('employeeDemoApp');
app.controller('employeesCtrl', function($scope, $state, EmployeeService, $stateParams) {
console.log("Hello")
$scope.saveEmployee = function(formname){
console.log(formname.$error)
EmployeeService.saveEmployee($scope.user);
$state.go("employees");
}
$scope.employeeslist = EmployeeService.getEmployees();
if($stateParams && $stateParams.id){
$scope.user = EmployeeService.getEmployee($stateParams.id);
$scope.user.dob = new Date($scope.user.dob);
console.log("gdfg", $scope.user)
}
$scope.updateEmployee = function(req){
EmployeeService.updateEmployee($stateParams.id, $scope.user);
$state.go("employees")
}
$scope.goto_new_employee_page = function(){
$state.go("employees_new")
}
$scope.deleteEmployee = function(index){
console.log("fgdfhdh")
EmployeeService.deleteEmployee(index);
$scope.employeeslist = EmployeeService.getEmployees();
}
});
I am using AngularJS and Angular-UI Bootstrap tabs. This is my controller:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.saveLanguage = function()
{
console.log($scope.test.vari); // loged undefined
}
}]);
My view
<div class="row clearfix">
<tabset>
<tab heading="Jezik">
<form role="form" name="test">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Save</button>
</form>
</tab>
</div>
Can someone help me to see why is loging undefined when I am using Angular-UI Bootstrap Tabs. Is it creating own scope. How tu access model value ?
This code solved my problem (removed name atribute from form, added ng-model="test.vari", and added $scope.test= {} in my controller) :
<tabset>
<tab heading="Jezik">
<form role="form">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="test.vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button>
</form>
</tab>
</div>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.test= {};
$scope.saveLanguage = function()
{
console.log($scope.test.vari);
// SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);
}
}]);
The tab creates child scopes so we need to bind it to an expression that evaluates to a model in the parent scope.
For this, the model must use a . like this:
ng-model='object.variable'
And we must declare the object in controller's top:
$scope.object = {};
Example:
angular.module('test', ['ui.bootstrap']);
var DemoCtrl = function ($scope) {
$scope.obj = {text: ''};
$scope.show = function() {
alert('You typed: ' + $scope.obj.text)
}
};
<!doctype html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
Value outside the tabs: {{obj.text}}
<uib-tabset>
<uib-tab heading="Tab 1">
<input ng-model="obj.text">
<button ng-click="show()">Show</button>
</tab>
</tabset>
</div>
</body>
</html>