angular 1 simple routing - data binding not working - javascript

Im using angular 1 for the data binding from the form to the next view using the routing module to display the html structure form the different files, it i have all the html code in one file the prototype works perfect, but when i use the routing module the data is not binding through the links,
In the following link im using only css for the transitions so all the html is in one file and not using the routing module and there it works http://jspmultimedia.com/angular-cv-css/#form
and in the next link is where is not working using the routing module
to pass the data from the form to be displayed in the next view.
http://jspmultimedia.com/angular-cv-route/#!/form
var app = angular.module("myApp", ["ngRoute"]);
//Routing for display and URLS
app.config(function($routeProvider) {
$routeProvider
.when("/", {
controller : 'myCtrl',
templateUrl : 'dashboard.htm'
})
.when("/form", {
controller : 'myCtrl',
templateUrl : 'form.htm'
})
.when("/result", {
controller : 'myCtrl',
templateUrl : 'resultdashboard.htm'
})
.otherwise({ redirectTo: 'dashboard.htm'});
});
//scope for select list (position)
app.controller('myCtrl', function($scope) {
$scope.position = [
"Front-end Web Developer",
"Back-end Web Developer",
"UI / UE Designer"
]
//add skills
$scope.skills = [];
$scope.addItem = function () {
$scope.skills.push($scope.addMe);
}
//remove skills
$scope.removeItem = function (x) {
$scope.skills.splice(x, 1);
}
});
this is the form.htm
<!-- FORM -->
<form id="form">
<div class="form-group row"><!-- Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">First Name(s)</label>
<div class="col-10">
<input type="text" ng-model="name" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="John" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Last Name -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Last Name(s)</label>
<div class="col-10">
<input type="text" ng-model="lastName" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="Smith Paterson" value="Javier Smith Paterson">
</div>
</div>
<div class="form-group row"><!-- Short Description -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Cover Letter</label>
<div class="col-10">
<textarea ng-model="shortDescription" class="form-control" id="exampleTextarea" rows="3" placeholder="A Short description of what you can ofer"></textarea>
</div>
</div>
<div class="form-group row"><!-- select Position to apply -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Position to Apply</label>
<div class="col-10">
<select ng-model="selectedPosition" class="form-control form-control-lg">
<option value="" selected disabled hidden>Choose here</option>
<option ng-repeat="x in position" value="{{x}}">{{x}}</option>
</select>
</div>
</div>
<div class="form-group row"><!-- add skills -->
<label for="lgFormGroupInput" class="col-2 col-form-label col-form-label-lg">Main Skills</label>
<div class="col-4">
<ul>
<li ng-repeat="x in skills" class="col-1">{{x}}<div class="col-1">
<span ng-click="removeItem($index)" style="cursor:pointer;">×</span>
</div>
</li>
</ul>
<input class="form-control" ng-model="addMe">
<button ng-click="addItem()" class="btn btn-primary">Add</button>
</div>
<div class="clearfix">
</div>
<div class="image-upload"> <!-- Image Upload preview -->
<input type="file" class="form-control-file" onchange="readURL(this);" />
<img id="preview-img" src="http://placehold.it/180" alt="your image" />
</div>
</div>
<!-- FINISH CTA-->
Finish
</form>
and at last the resultdashboard.htm
<!-- Result dashboard CV -->
<div id="resultDashboard">
<div class="row col-12">
<div class="col-3">
<img src="http://placehold.it/18" class="rounded-circle" id="resDashImg" alt="photo image of {{name + " " + lastName}}" title="{{name + " "+ lastName}}">
</div>
<div class="col-6">
<h1>{{ name + " " +lastName}}</h1>
<p>{{shortDescription}}</p>
<div class="text-center d-flex"><p>Applying for: </p><h3 class="ml-3">{{selectedPosition}}</h3></div>
</div>
<div class="col-3">
<h3>Main Skills</h3>
<ul>
<li ng-repeat="x in skills"> {{x}}
</li>
</ul>
</div>
</div>
</div>
i'm assuming i must be missing something with the controller if anyone can take a quick look please i would really appreciate it, the prototype is suppose to be a CV upload just to learn how to use angular 1 and then go ahead with other libraries, i think understanding the routing is a big step for me. anyways thank you.

Add the controller in your HTML - like ng-controller="myCtrl"

Related

Parent ng-click action is getting triggered on child ng-click (from child, need to access $parentNodesScope for angular-tree-ui)

I’m trying to post Form and including angular-ui as one of element in form (http://plnkr.co/edit/6S881qNp3v7UI4Bo9pko?p=preview), whenever I am clicking “Insert Below”, form is getting posted (in addition to inserting one more input field)
event.stopPropagation() will also not work as to add tree ui , I have to take scope on parent and as soon as I get that, ng-click of parent is also getting called
Parent Controller
var app = angular.module('crudApp', [ 'ui.router', 'ngStorage', 'clockApp',
'myApp', 'plunker', 'radioB', 'timeTicker', 'TodoApp' ]);
app.constant('urls', {
BASE : 'localhost:3030',
USER_SERVICE_API : 'localhost:3030'
});
app.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('home', {
url : '/',
templateUrl : 'partials/list',
controller : 'UserController',
controllerAs : 'ctrl',
resolve : {
users : function($q, UserService) {
console.log('Load all users');
var deferred = $q.defer();
UserService.loadAllUsers().then(deferred.resolve,
deferred.resolve);
return deferred.promise;
}
}
});
$urlRouterProvider.otherwise('/');
} ]);
Child Controller
var app = angular.module('plunker', ['ui.tree']);
app.directive('focus', function($timeout) {
return {
restrict: 'AC',
link: function(scope, element) {
$timeout(function(){
element[0].focus();
}, 0);
}
};
});
app.controller('MainCtrl', function($scope) {
$scope.nodes = [{
value: "",
price: "",
nodes: []
}]
});
View - list.ftl
Everything is working fine except the data is saving from child controller’s
ng-click instead of parent (form input)
<div class="generic-container">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
<span class="lead">User </span>
</div>
<div class="panel-body">
<div class="formcontainer">
<div class="alert alert-success" role="alert"
ng-if="ctrl.successMessage">{{ctrl.successMessage}}</div>
<div class="alert alert-danger" role="alert"
ng-if="ctrl.errorMessage">{{ctrl.errorMessage}}</div>
<form ng-submit="ctrl.submit()" name="myForm" class="form-
horizontal">
<input type="hidden" ng-model="ctrl.user.id" />
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable"
for="uname">Name</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.name"
id="uname"
class="username form-control input-sm"
placeholder="Enter your name" required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="pnumber">Phone
Number</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.pnumber" id="pnumber"
class="username form-control input-sm"
placeholder="Phone Number" required ng-minlength="3"
ng-maxlength="10" ng-pattern="ctrl.onlyNumbers" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="address">Address</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.address" id="address"
class="username form-control input-sm" placeholder="Address"
required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="work">Work</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.work" id="work"
class="username form-control input-sm" placeholder="Work"
required ng-minlength="3" />
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="price">Price</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.user.price" id="price"
class="form-control input-sm" placeholder="Price" required
ng-pattern="ctrl.onlyNumbers" />
</div>
</div>
</div>
<!-- Adding multinode value - start -->
<div ng-controller="MainCtrl">
<script type="text/ng-template" id="nodes_renderer.html">
<div ui-tree-handle>
<div class='form-group'>
<input class='username form-control input-sm' ng-model='node.value' focus>
<input class='form-control' ng-model='node.price' focus>
</div>
<button class='btn btn-primary btn-sm' ng-click='$parentNodesScope.$modelValue.splice($index+1,0,{value:"New", nodes:[]});'>Insert below</button>
<button class='btn btn-primary btn-sm' ng-click='node.nodes.push({value: "New", nodes:[]});'>Insert child</button>
</div>
</script>
<div ui-tree>
<ol ui-tree-nodes ng-model="nodes" id="tree-root">
<li ng-repeat="node in nodes" ui-tree-node ng-include="'nodes_renderer.html'"></li>
</ol>
</div>
{{nodes}}
</div>
<div class="row">
<div class="form-actions floatRight">
<input type="submit" value="{{!ctrl.user.id ? 'Add' : 'Update'}}"
class="btn btn-primary btn-sm"
ng-disabled="myForm.$invalid || myForm.$pristine">
<button type="button" ng-click="ctrl.reset()"
class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset
Form</button>
</div>
</div>
</form>
</div>
</div>
</div>

AngularJS - add a checkbox to a widget

How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?

Searching the list in angular JS

I have one search box in one page i.e header.html file and the list on which i want to implement the search functionality is on another page i.e content.html. So how can i use angularjs search functionality in this case. Below is the html code.
header.html
<div class="input-group col-md-12 search-inner-page ">
<input type="text" class="form-control" placeholder="Search" name="q">
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
</div>
contentCtrl.js
angular.module("adminsuite").controller("surveyController",['getAllSurveyService','AuthenticationService', '$scope','$rootScope', '$state', function(getAllSurveyService,AuthenticationService, $scope,$rootScope,$state){
getAllSurveyService.surveyList().then(
function( data ) {
$scope.allSurveys = data;
console.log($scope.allSurveys);
if($scope.allSurveys.ErrorMessage){
AuthenticationService.ClearCredentials();
$state.go('login');
}
}
);
}]);
headerController.js
angular.module("adminsuite").controller("headerController",['AuthenticationService','$rootScope','$cookieStore','$scope',function(AuthenticationService,$cookieStore,$scope,$rootScope){
$scope.header = "Header";
$scope.searchInSurvey = $scope.surveySearch;
$scope.logout = function(){
//$scope.dataLoading = true;
AuthenticationService.ClearCredentials();
console.log($cookieStore.get('globals'));
//$state.go('login');
};
}]);
On typing something in the search box of header.html as mentioned above, it should search the content in content.html page.
You could maybe use a ng-change on the input of header.html to update the allSurveys array.
Just add a ng-change and a ng-model to your input
<div class="input-group col-md-12 search-inner-page ">
<input ng-model="yourCtrl.searchInput" ng-change="yourCtrl.searchInputChanged" type="text" class="form-control" placeholder="Search" name="q">
</div>
In your controller you can add a function searchInputChanged that will filter the data based on searchInput using .filter().
You can set your list of Surveys in a variable into a $rootScope, and get its value from another controller, like this:
//Controller that contains the list
$rootScope.surveysList = [s1,s2,s3,...,sn];
After that, you can get this variable and set into the controller scope where your input is.
$scope.allSurveys = $rootScope.surveysList;
Your input should be like this:
<input ng-model="surveySearch" type="text" class="form-control" placeholder="Search" name="q">
And que query in your list template should be like this:
ng-repeat="survey in allSurveys | filter:surveySearch"
I hope it works for you
Thank You guys. I got the answer like this...
header.html
<div class="input-group col-md-12 search-inner-page">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="global.search">
<img src = "images/search.png" alt = "Generic placeholder thumbnail" >
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
headerCtrl.js
$rootScope.global = {
search: ''
};

ng-submit is not working

I HAVE A FORM BUT NG SBMIT DOESNOT CALL THE FUNCTION
I dont understand why this form not submitting . i have check every thing but it not even call the alert button also
HTML
<form role="form" name="frmCashback" method="post" ng-submit="CashbackUser(frmCashback, Rates)">
<!-- Personal Details Start -->
<div class="well">
<legend> Cashback Details </legend>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="Store">Store:</label>
<select name="Store" class="form-control" ng-model="Rates.Store" ng-options="stores.StoreID as stores.StoreName for stores in StoreList" >
<option value="">Select</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="Store">Category:</label>
<select name="Category" class="form-control" ng-model="Rates.Category" ng-options="Cate.CategoryID as Cate.CategoryName for Cate in CategoryList" >
<option value="">Select</option>
</select>
</div>
<!-- Modal -->
<!---------Model End-------->
</div>
<div class="col-md-4">
<div class="form-group">
<label for="usr">Cash Back Rate:</label>
<input type="text" class="form-control" name="Cashback" id="Cashback" ng-model="Rates.Cashback" required>
</div>
</div>
</div>
<!---------Model End-------->
</div>
</div>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary" type="submit">Add Cashback</button>
</div>
</div>
</div>
<!-- Personal Details End -->
</form>
Here is my controller
CONTROLLER
$scope.CashbackUser = function(frm, Rates) {
alert('Hi');
//query_params.Status = CheckStatus.Action;
//console.log(Rates);
}
I have check :
function is within the controller
I am figthing with this for 4 hr kindly help me.
Your template seems to be having error ,form submit will not work if your template having error think so
<!---------Model End-------->
</div>
</div>
In your form, you can use this:
ng-submit="CashbackUser()"
And in your controller:
$scope.CashbackUser = function(){
console.log($scope.frmCashback);
console.log($scope.Rates);
}

AngularJs View not showing

Hi I am a new comer to angular js. when I load the page it shows two errors
1 - Error: [$injector:unpr]
2 - Error: [$injector:cdep]
HTML
index.html
<body ng-app="MyApp">
<nav>
<!-- navbar items displaying here -->
</nav>
<div ng-view></div>
</body>
<script src="libs/js/angular.js"></script>
<script src="libs/js/angular-route.min.js"></script>
<!--angular controller file-->
<script src="libs/apps.js"></script>
<script src="libs/controller.js"></script>
<!--Other UI Libraries-->
<script src="libs/js/jquery.min.js"></script>
partials/developers.html
<section class="developer">
<div class="container-fluid">
<div class="col-md-9 col-md-offset-3">
<form ng-submit="check()">
<div class="form-group">
<div class="col-md-6">
<input type="text" class="form-control" autofocus="true" ng-model-options="{debounce: 300}" ng-model="search" placeholder="Search text here"/>
</div>
</div>
</form>
</div>
<div class="sort col-md-5 col-md-offset-3">
<label class="formgroup">Sort By</label>
<select ng-model="order">
<option value="name" selected="selected">
Name
</option>
<option value="org">
Organisation
</option>
<option value="designation">
Designation
</option>
</select>
<label class="formgroup">
<input ng-model="direction" type="radio" name="order" checked>
Ascending
</label>
<label class="formgroup">
<input ng-model="direction" type="radio" name="order" value="reverse">
Descending
</label>
</div>
<div class="col-md">
<div class="col-md-9 col-md-offset-3">
<div class="col-md-6 mydiv" ng-clock>
<ul ng-show="search ">
<li class="items" ng-repeat="item in list | filter:search | orderBy:order:direction" ng-model-options="{ updateOn: 'blur' }">
<label class="lbl">Name</label><p class="text name" ng-bind="item.name"></p>
<label class="lbl">Designation</label><p class="text desig" ng-bind=" item.designation"></p>
<label class="lbl">Organisation</label><p class="text org" ng-bind="item.org"></p>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</div><!--Container fluid closes-->
</section>
app.js
var myApp = angular.module("MyApp",[
'ngRoute',
'appController'
]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider.
when('/list',{
templateUrl : 'partials/developers.html',
controller:'DeveloperController',
}).
otherwise({
redirectTo: '/list'
});
}]);
controller.js
var appController = angular.module("appController", []);
appController.controller('DeveloperController', ['$scope','$http',function($scope,$http) {
$scope.name="asdsas";
}]);
see the console image here
EDIT
this is my directory structure of project. will it make any trouble. I'm not running it on wamp or any other server.
anyone please help me to sort it out
The error is caused due to missing inclusion of ngRoute module. It needs to be included separately
Try including the following in your scripts
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
Refer this for more details.
the code provided for index.html is incorrect.
See if this helps
<div ng-app="MyApp">
<div ng-view>
</div>
</div>

Categories