I have this small AngularJS app, and most ng-click expressions work fine.
As an example I use submitted=true and submitted=false as hide and show for some buttons and to add a class show to the ingredients div. However, I can't get ng-click="submitted=false" on the last button .restart to work? On this click it should make the expression submitted=false, so the ingredients div will not have the show class anymore, and change the buttons.
How come?
Fiddle
var app = angular.module("app", []);
app.controller("IndexController", ["$scope", function($scope) {
this.list = {
"mandag": {}
};
this.submitted = false;
this.addFood = (day, title) => {
this.list[day] = {
"food": title,
"ingredients": []
};
}
this.removeFood = (day) => {
this.list[day] = {};
}
this.addIngredient = (day, ingredient) => {
this.list[day].ingredients.push({
"name": ingredient.name,
"amount": ingredient.amount,
"unit": ingredient.unit
});
}
this.UnSave = () => {
this.list.mandag = {};
}
}]);
.shopping {
width: 25%;
}
.ingredients {
opacity: .1;
transition: opacity 1s ease;
}
.show {
opacity: 1;
}
button {
border: none;
background: transparent;
}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="app" >
<div ng-controller="IndexController as vm">
<div style="margin: 20px; display: inline-block;" ng-repeat="(day, item) in vm.list track by $index" class="card-panel teal col s9">
<h3>{{day}}</h3>
<form class="" name="ret" ng-submit="vm.addFood(day, item.food)">
<input placeholder="" name="inputRet" class="inputRet" ng-disabled="submitted" type="text" ng-model="item.food" required/>
<button class="btn waves-effect waves-light addFood" ng-disabled="ret.$invalid" ng-click="submitted=true" ng-hide="submitted">Add</button>
<a class="btn waves-effect waves-light editFood" ng-click="submitted=false" ng-show="submitted"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
<a ng-click="vm.removeFood(day); submitted=false">remove</a>
</form>
<div class="ingredients off" ng-class="{'show': submitted}">
<p>Ingredienser:</p>
<ul>
<li ng-repeat="ingredient in item.ingredients track by $index">
<button class="btn waves-effect waves-light" ng-click="vm.removeIngredient(day, ingredient); submitted=true">Add</button>
<span>{{ingredient.name}} ({{ingredient.amount}} {{ingredient.unit}})</span>
</li>
</ul>
<form name="ingredients_form" class="input-field">
<input placeholder="Ingredient" type="text" name="ingredients_name" ng-model="vm.ingredient[$index].name" value="" required/>
<input placeholder="Amount" type="number" ng-model="vm.ingredient[$index].amount" value="" required/>
<select ng-model="vm.ingredient[$index].unit" required>
<option value="" disabled selected>Choose your option</option>
<option value="g" title="gram">g</option>
<option value="kg" title="kilogram">kg</option>
<option value="l" title="liter">l</option>
</select>
</form>
<button class="btn waves-effect waves-light" ng-disabled="ingredients_form.$invalid" ng-click="vm.addIngredient(day, vm.ingredient[$index]); vm.ingredient[$index] = ''; ">Add</button>
</div>
</div>
<button class="restart" ng-click="vm.UnSave(); submitted=false">Restart</button>
</div>
</body>
Related
I want this app only to display results after submit button is pressed. At moment results show up as form is being completed. I'm using Angular.
HTML:
<html>
<div class="calc-page">
<div ng-app="myApp" ng-controller="myCtrl" class="hello">
<h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
<form action="action_page.php">
<p>Cost Price: <input type="text" ng-model="costPrice"></p><br>
<p>Sales Price: <input type="text" ng-model="salesPrice"></p><br>
<input value="Submit" class="btn btn-default hide-btn">
<input value="Clear" class="btn btn-default clear-btn">
</form>
<div class="results">
<p>Profit: {{(salesPrice - costPrice)}}</p>
<p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
<p>Mark Up: {{((salesPrice - costPrice) / costPrice * 100)| number:0 }}%</p>
</div>
</div>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.costPrice= 0;
$scope.salesPrice= 0;
});
CODEPEN: https://codepen.io/Jonod/pen/wKGLzO
Try the following (hiding the div until button is pressed or values in inputfield are changed):
<html>
<div class="calc-page">
<div ng-app="myApp" ng-controller="myCtrl" class="hello">
<h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
<form action="action_page.php">
<p>Cost Price: <input type="text" ng-change="submitted=false" ng-model="costPrice"></p><br>
<p>Sales Price: <input type="text" ng-change="submitted=false" ng-model="salesPrice"></p><br>
<input value="Submit" ng-click="submitted=true" class="btn btn-default hide-btn">
<input value="Clear" ng-click="clear()" class="btn btn-default clear-btn">
</form>
<div class="results" ng-if="submitted">
<p>Profit: {{(salesPrice - costPrice)}}</p>
<p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
<p>Mark Up: {{((salesPrice - costPrice) / costPrice * 100)| number:0 }}%</p>
</div>
</div>
</html>
And in the controller you could then add:
$scope.clear = function() {
$scope.costPrice= 0;
$scope.salesPrice= 0;
$scope.submitted=false;
}
You can try something like this:
HTML:
<html>
<div class="calc-page">
<div ng-app="myApp" ng-controller="myCtrl" class="hello">
<h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
<form action="action_page.php" ng-submit="call()">
<p>Cost Price: <input type="text" ng-model="costPrice"></p><br>
<p>Sales Price: <input type="text" ng-model="salesPrice"></p><br>
<input type="submit" value="Submit" class="btn btn-default hide-btn">
<input type="button" value="Clear" class="btn btn-default clear-btn" ng-click="clear()">
</form>
<div class="results" ng-if="show">
<p>Profit: {{(salesPrice - costPrice)}}</p>
<p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
<p>Mark Up: {{((salesPrice - costPrice) / costPrice * 100)| number:0 }}%</p>
</div>
</div>
</html>
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.costPrice= 0;
$scope.salesPrice= 0;
$scope.show = false;
$scope.call = function() {
$scope.show = true;
}
$scope.clear = function() {
$scope.show = false;
$scope.costPrice= 0;
$scope.salesPrice= 0;
}
});
You can try like the below,
Template:
<form action="action_page.php">
<p>Cost Price: <input type="text" ng-model="costPriceModel"></p><br>
<p>Sales Price: <input type="text" ng-model="salesPriceModel"></p><br>
<input type="button" ng-click="getResult(costPriceModel, salesPriceModel);" value="Submit" class="btn btn-default hide-btn">
<input type="button" ng-click="clearResult()" value="Clear" class="btn btn-default clear-btn">
</form>
controller code:
$scope.getResult=function(a, b){
$scope.costPrice= a;
$scope.salesPrice= b;
}
$scope.clearResult=function(){
$scope.costPrice= 0;
$scope.salesPrice= 0;
}
You can:
remove form action attribute, you can create a request using the $http service. You don't want to go away from your single page app.
you can use and then reference the myForm in your scope. Like $scope.myForm.
you can check if the form was submitted by doing $scope.myForm.$submitted
you can check if your form is valid by adding novalidate to your form to disable HTML validation then check with $scope.myForm.$valid
you can reset the submitted state after you reset the form by doing $scope.myForm.$setPristine()
note that the <div> is shown if the form was submitted, but maybe is better to show the summary if the form was successfully submitted like keeping track of a flag $http.post('/action_page.php', {...}).then(() => $scope.isSubmittedSuccessfully = true).catch(() => $scope.isSubmittedSuccessfully = false).
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.costPrice= 0;
$scope.salesPrice= 0;
$scope.onSubmit = () => {
if(!$scope.myForm.$valid) {
return;
}
// note that this is not actually working as there is no /action_page.php
$http.post('/action_page.php', {
costPrice: $scope.costPrice,
salesPrice: $scope.salesPrice
})
.then(response => {
console.log('Submitted!');
})
.catch(error => {
console.log('Submit error!');
});
};
$scope.resetForm = () => {
$scope.costPrice= 0;
$scope.salesPrice= 0;
$scope.myForm.$setPristine();
};
});
/*$(function() {
$(".results").hide();
});
$(".hide-btn").click(function(){
$(".results").show();
});
$(".clear-btn").click(function(){
$(".results").hide();
$(this).closest('form').find("input[type=text], textarea").val("");
});*/
$primary-color: #36454f;
$font-stack: Helvetica, sans-serif;
$font-stack-head: Impact, sans-serif;
.hello {
padding: 50px;
height: 500px;
background-color: rgba(255, 255, 255, 0.5);
margin: auto;
width: 50%;
padding: 10px;
border-radius:10px;
color: $primary-color;
h2 {
font-family: Impact;
padding-bottom: 20px;
}
p {
font-size: 16px;
color: $primary-color;
}
}
.calc-page {
padding: 50px;
background-color: #e4ebec;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='Artboard-5' fill='%23ffffff' fill-opacity='0.4' fill-rule='nonzero'%3E%3Cpath d='M6 18h12V6H6v12zM4 4h16v16H4V4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
};
.results {
padding: 30px 0 30px 0;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<head>
<body>
<div class="calc-page">
<div ng-app="myApp" ng-controller="myCtrl" class="hello">
<h2 class="text-center">Mark-up vs Gross Profit Calculator</h2>
<form name="myForm" novalidate ng-submit="onSubmit()">
<p>Cost Price: <input type="number" ng-model="costPrice" required></p><br>
<p>Sales Price: <input type="number" ng-model="salesPrice" required></p><br>
<button type="submit" class="btn btn-default hide-btn">Submit</button>
<button type="button" class="btn btn-default clear-btn" ng-click="resetForm()">Clear</button>
</form>
<div class="results" ng-if="myForm.$submitted">
<p>Profit: {{(salesPrice - costPrice)}}</p>
<p>Gross Profit Margin: {{((salesPrice - costPrice) / salesPrice * 100)| number:0}}% </p>
<p>Mark Up: {{((salesPrice - costPrice) / costPrice * 100)| number:0 }}%</p>
</div>
</div>
</body>
To add the JSON data to Table by using Angular JS.
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js">
Filter
Ascending Order
Descending Order
USER ID
ID
TITLE
COMPLETED
ACTION
<tbody>
<tr ng-repeat="x in userId">
<td>
<div ng-hide="editingData[x.id]">{{x.userId}} </div>
<div ng-show="editingData[x.id]"><input type="text" ng-model="x.userId" /></div>
</td>
<td>
<div>{{x.id}}</div>
</td>
<td>
<div ng-hide="editingData[x.id]">{{x.title}} </div>
<div ng-show="editingData[x.id]"><input type="text" ng-model="x.title" /></div>
</td>
<td>
<div ng-hide="editingData[x.id]">{{x.completed}} </div>
<div ng-show="editingData[x.id]"><input type="text" ng-model="x.completed" /></div>
</td>
<td>
<button ng-hide="editingData[x.id]" ng- click="modify(x)">Modify</button>
<button ng-show="editingData[x.id]" ng- click="update(x)">Update</button>
<button ng-hide="viewField">Remove</button>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<div>ADD NEW DETALS</div>
<form class="form-horizontal" role="form" ng-submit="addRow()">
<div class="form-group">
<label class="col-md-2 control-label">USER ID</label>
<div class="col-md-4">
<input type="text" class="form-control" name="userId"
ng-model="x.userId" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">ID</label>
<div class="col-md-4">
<input type="text" value=201 class="form-control" name="id"
ng-model="x.id" />
</div> </div>
<div class="form-group">
<label class="col-md-2 control-label">TITLE</label>
<div class="col-md-4">
<input type="text" class="form-control" name="title"
ng-model="x.title" />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">COMPLETED</label>
<div class="col-md-4">
<input type="text" class="form-control" name="completed"
ng-model="x.completed" />
</div>
</div>
<div class="form-group">
<div style="padding-left:110px">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</form>
</div>
</body>
</html>
Controllers.js
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.userId = [];
$http.get("").success(function (response)
{$scope.userId = response});
$scope.editingData = [];
for (var i = 1, length = $scope.userId.length; i < length; i++) {
$scope.editingData[$scope.userId[i].id] = false;
}
$scope.modify = function(x){
$scope.editingData[x.id] = true;
};
$scope.update = function(x){
$scope.editingData[x.id] = false;
};
});
$scope.addRow =function( event ){
if (event.success) {
$http.post("", { 'userId':$scope.userId, 'id': $scope.id, 'title':$scope.title, 'completed':$scope.completed })
.success(function (response)
{$scope.userId = response;
});
}
}
Style.css
body {
background-color: #eef;
}
#tabs {
width: 95%;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 4px;
font-family: arial;
}
td {
text-align: center;
}
th {
background: darkblue;
color: white;
text-align: center;
}
/*Style for Alternate Rows*/
table tr:nth-child(odd) {
background-color: #C2EBC3;
}
table tr:nth-child(even) {
background-color: #FFFFFF;
}
Simple example
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="MyApp">
<input type="text" ng-model="text" placeholder="Enter text"/>
<p>Input: {{ text }}</p>
<p>Filtered input: {{ text | reverse }}</p>
<my-directive></my-directive>
<script type="text/javascript">
app.angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<a href="http://google.com">
Click me to go to Google</a>'
}
});
var app = angular.module("MyApp", []);
app.filter("reverse", function() {
return function(input) {
var result = "";
input = input || "";
for (var i=0; i<input.length; i++) {
result = input.charAt(i) + result;
}
return result;
};
});
</script>
</body>
</html>
For reference you can use this links
"http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/"
"Push json data to existing array in angular js"
"Adding new row of fields with AngularJS ng-repeat"
"Angularjs - Update JSON"
You need to define your app only once. you need to remove this line var app = angular.module("MyApp"); which is flushing your app which has myDirective directive.
Code
app.angular.module('myApp', [])
.directive('myDirective', function() {
return {
restrict: 'E',
template: '<a href="http://google.com">
Click me to go to Google < /a>'
}
});
app.filter("reverse", function() {
return function(input) {
var result = "";
input = input || "";
for (var i = 0; i < input.length; i++) {
result = input.charAt(i) + result;
}
return result;
};
});
I am trying to toggle a class on click, please find my below code.
<li class="dropdown" data-ng-class="sign-open">
Sign In <b class="caret"></b>
<div class="dropdown-menu" style="padding: 15px;">
<form action="#" method="post" accept-charset="UTF-8" class="form-menu">
<input id="user_username" type="text" name="user[username]" size="33" placeholder="Username">
<input id="user_password" type="password" name="user[password]" size="33" placeholder="Password">
<label class="checkbox muted hidden-tablet">
<input type="checkbox">Remember Me</label>
<input class="btn span3" type="submit" name="commit" value="Sign In">
</form>
</div>
</li>
//sign in show-hide
$scope.signToogle = function () {
if ($scope.sign-open === "")
$scope.class = "open";
else
$scope.class = "";
}
this js funciton will addclass open so if ul has open class as it's parent then it will be visible.
But don't know how can I make that if click once then true and class append and if again clicked statement false and class will be removed.
You can use ng-class
<div ng-class="{active: is_active}">Some div</div>
<button ng-click="is_active = !is_active" ng-init="is_active=false">Click to toggle</button>
Set or reset $scope.is_active when you click
var app = angular.module('app', []);
app.controller('Main', function($scope) {
$scope.isOpen = false;
});
.item span {
display: none;
}
.item.close span.show-on-close {
display: block;
}
.item.open span.show-on-open {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Main">
<pre>isOpen: {{isOpen | json}}</pre>
<span class="item" ng-class="{'open':isOpen, 'close':!isOpen}">
<span class="show-on-open">open</span>
<span class="show-on-close">close</span>
</span>
<button ng-click="isOpen = !isOpen">Toggle</button>
</div>
</div>
NOTE: variable in JavaScript can't contains the dash character
so rename your $scope.sign-open to $scope.signOpen
you don't even have to define a function in the controller, you can do it like this:
<span ng-class="{'open':!signOpen, '':signOpen}"></span>
on click handler
<button ng-click="signOpen = !signOpen">toggle</button>
I am new at AngularJS and I am trying to figure out how to add and delete notes to the setup that I have created. I have tried a lot of different things but I cant figure out how to get it to work.
I have cleaned up my code so it should be easier to figure out.
Please take a look at the jsfiddle version or snippet of my code:
'use strict'
var app = angular.module('plunker', ['ui.sortable']);
app.controller('MainCtrl', function($scope) {
var i;
$scope.itemsList = {
items1: [],
items2: []
};
for (i = 0; i <= 5; i += 1) {
$scope.itemsList.items1.push({
'Id': i,
'Label': 'Item ' + i
});
}
$scope.sortableOptions = {
containment: '#sortable-container',
accept: function(sourceItemHandleScope, destSortableScope) {
return sourceItemHandleScope.itemScope.sortableScope.$id === destSortableScope.$id;
}
};
});
.as-sortable-item,
.as-sortable-placeholder {} #sortable-container {} .touch-mover {
float: right;
padding: 3px;
margin-top: 5px;
}
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
<script src="https://rawgithub.com/a5hik/ng-sortable/master/dist/ng-sortable.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="sortable-container">
<div class="form-actions">
<div class="input-append">
<form>
<input class="span3" size="16" type="text" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="">
Add Note
</button>
</form>
</div>
</div>
<div class="sortable-row" as-sortable="sortableOptions" ng-model="itemsList.items1">
<div ng-repeat="item in itemsList.items1" class="simpel-fighter-input" as-sortable-item>
<input class="category-form textboxid" type="text" name="input" ng-model="item.Label" placeholder="Deltager1">
<div as-sortable-item-handle class="touch-mover">MOVE ME</div>
<a ng-click="" href>
<div class="touch-mover">DELETE</div>
</a>
<input class="category-form textboxid" style="float:right" type="text" name="input" ng-model="item.Label2" placeholder="Deltager2">
</div>
</div>
</div>
</body>
</html>
For adding a note just insert into your controller MainCtrl this function:
$scope.addNote = function() {
$scope.itemsList.items1.push({"Id" : $scope.itemsList.items1.length, "Label": "Item " + $scope.itemsList.items1.length})
}
and edit your form (add ng-model to input and ng-click function to button) like:
<input class="span3" size="16" type="text" ng-model="noteText" placeholder="Add a note">
<button class="btn btn-success" type="button" ng-disabled="" ng-click="addNote()">
Add Note
</button>
For deleting use in you controller something like
$scope.deleteNote = function(index) {
$scope.itemsList.items1.splice(index,1)
}
and attach this function to the tag "DELETE" like
ng-click="deleteNote($index)"
I hope this helps.
After getting values from REST-API $scope is not updating view
here is my HTML
<div ng-repeat="s in services1">
<label class="checkbox-inline">
<input type="checkbox" id="{{s.Id}}" name="{{s.Id}}" ng-model="s.IsChecked">
{{s.Name}}</label>
<br/>
</div>
AngularJS Controller
var addMember = [
'$scope', '$http', function ($scope, $http) {
$scope.member = [];
$scope.services1 = [];
var bid = "";
//onclick function
$scope.setId = function(id) {
$("#processing-modal").modal('show');
$http.get('/api/Servicesapi/ServicesByBusiness/' + id)
.then(function (response) {
$scope.services1 = response.data;
$("#processing-modal").modal('hide');
$("#anm").modal('show');
console.log($scope.services1); //this is printing values
},
function() {
alert("Error in getting services of this Employee");
});
console.log($scope.services1); //this prints empty array
};
}
];
first console.log() prints array with values but the other one outside $http.get function prints empty braces and view is not updating
UPDATE
FULL HTML VIEW
<div ng-controller="addMember">
<div class="savebar"><button type="submit" class="btn btn-warning" value="Save"
id="anmbutton" ng-click="setId('#ViewBag.bid');">Add New Members</button>
</div>
</div>
<!--Add new Members Modal -->
<div ng-controller="addMember">
<div class="modal fade" id="anm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content" style="width: 790px;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Team Member</h4>
</div>
<div class="modal-body">
<div style="float: left">
<div style="float: left">
<div class="container" style="border-right: 1px solid gray; margin-left: -20px; margin-top: -12px; width: 440px;">
<!-- Profile Picture -->#*<br/>*#
<div style="border: 1px solid; float: left; height: 100px; width: 100px;">
<img src="" />
<a class="badge" href="#">Add Picture</a>
</div>
<div style="float: left; height: 100px; margin-left: 20px; width: 200px;">
<br/><br/><br/><br/><br/>
<input class = "form-control" style = "margin-top: -100px; width: 250px" type="text" value="" id="membername" ng-model="member.Name"/>
<input type="checkbox" class="checkbox" id="provideservice" name="provideservice" value="true"/> Provide Services<br/>
<input type="checkbox" class="checkbox" id="SearchedByName" name="SearchedByName" value="true" ng-model="member.SearchedByName"/> Allow Selected by Name
<hr/>
</div>
</div>
<div style="border-right: 1px solid grey; margin-top: -11px; width: 420px;">
<div style="margin-left: 112px; margin-top: 10px; width: 200px;">
<label>Pricing Level</label>
<input class="form-control" type="text" id="pricinglevel" name="pricinglevel"/>
<label>Job Title</label>
<input class="form-control" type="text" id="JobTitle" name="JobTitle" value="" ng-model="member.JobTitle"/>
<label>Phone</label>
<input class="form-control" type="text" id="Phone" name="Phone" value="" ng-model="member.Phone"/>
<label>Gender</label>
<br/>
<label class="checkbox-inline">
<input type="radio" id="Gender" name="Gender" value="Male" ng-model="member.Gender"> Male
</label>
<label class="checkbox-inline">
<input type="radio" id="Gender" name="Gender" value="Female" ng-model="member.Gender"> Female
</label>
<label>Email</label>
<input class="form-control" type="text" id="Email" name="Email" value="" ng-model="member.Email"/>
<label class="checkbox-inline">
<input type="checkbox" id="CanLogin" name="CanLogin" ng-model="member.CanLogin"> Login to Dashboard
</label>
<br/>
<label>about</label>
<textarea class="form-control" name="About" ng-model="member.About" ></textarea>
</div>
</div>
</div>
<div style="float: right; /*padding-right: 20px;*/margin-right: -345px; margin-top: -16px; width: 340px;">
<label>What services can be booked for this employee online?</label>
<br/>
<div ng-repeat="s in services1">
<label class="checkbox-inline">
<input type="checkbox" id="{{s.Id}}" name="{{s.Id}}" ng-model="s.IsChecked"> {{s.Name}}
</label>
<br/>
</div>
<pre>$scope.services1 {{services1 | json}}</pre>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="addNew()" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
UPDATE:
I reproduced two controllers declarations with same name.
<div ng-controller="addMember">
<button ng-click="setId()">SDFS</button>
</div>
<div ng-controller="addMember">
<p ng-repeat="s in services">{{s}}</p>
</div>
ng-repeat doesn't work in second controller declaration. If I move <p ng-repeat="s in services">{{s}}</p> to top controller, it works. Do not declare two controllers with one name :)
END
console.log($scope.services1); //this prints empty array
This is because $http.get() promise is not resolved yet.
Try this code
var addMember = [
'$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
$scope.member = [];
$scope.services1 = [];
var bid = "";
//onclick function
$scope.setId = function(id) {
$("#processing-modal").modal('show');
$http.get('/api/Servicesapi/ServicesByBusiness/' + id)
.then(function (response) {
$timeout(function(){
$scope.services1 = response.data;
});
$("#processing-modal").modal('hide');
$("#anm").modal('show');
console.log($scope.services1); //this is printing values
},
function() {
alert("Error in getting services of this Employee");
});
console.log($scope.services1); //this prints empty array
};
}
];
Or call $scope.$apply() after $scope.services1 = response.data;
$scope.services1 = response.data;
$scope.$apply()