I'm using ngResource with http to call the rest webservice that I made for the crud and I get this error http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…0yc%20(http%3A%2F%2Flocalhost%3A8088%2Fangular%2Fangular.min.js%3A20%3A274)
I put the angular js script reference properly but it's not working
this is my code:
var app = angular.module('myApp', ['ngResource']);
app.controller('StadeController', ['$scope', '$resource',function($scope,$resource) {
function fetchAllStades(){
$scope.stades = $resource('http://localhost:8088/stades'
).query(function(data){return data;});
};
fetchAllStades();
$scope.refresh = function(){
fetchAllStades();
};
$scope.create = function(){
Stade = $resource(
"http://localhost:8088/stades",
{},
{save: {method:'POST',isArray:false}}
);
var stade = {};
stade.id = $scope.stadeForm.id;
stade.name = $scope.stadeForm.description;
stade.phoneNo = $scope.stadeForm.checked;
$scope.Message = Stade.save(stade);
$scope.stadeForm.id = "";
$scope.stadeForm.description="";
$scope.stadeForm.checked="";
};
$scope.deleteRec = function(){
Stade = $resource(
"http://localhost:8088/stades/:id",
{},
{save: {method:'DELETE', params: {id: '#id'}}}
);
Stade.delete({id: $scope.stadeForm.id}).then(function successCallback(response) {
$scope.Message = response;
}, function errorCallback(response) {
});
$scope.stadeForm.id = "";
$scope.stadeForm.description="";
$scope.stadeForm.checked="";
};
$scope.update = function(){
Stade = $resource(
"http://localhost:8088/stades/:id",
{},
{save: {method:'PUT', params: {id: '#id'}}}
);
var stade = {};
stade.id = $scope.stadeForm.id;
stade.description = $scope.stadeForm.description;
stade.checked = $scope.stadeForm.checked;
$scope.Message = Stade.save({id: $scope.stadeForm.id}, stade);
$scope.stadeForm.id = "";
$scope.stadeForm.description="";
$scope.stadeForm.checked="";
};
}]);
<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp">
<div ng-controller="StadeController">
<form name="stadeForm" >
<table class="table stripped">
<thead><tr><th>ID </th> <th>checked</th> <th>description</th></tr></thead>
<tbody><tr ng-repeat="row in stades">
<td><span ng-bind="row.id"></span></td>
<td><span ng-bind="row.description"></span></td>
<td><span ng-bind="row.checked"></span></td>
<td>
</tr> </tbody>
</table>
<p class="bg-info info-msg" id="info1">{{Message}}</p>
<div class="form-group" >
<label class=blue_font>description</label>
<input class=form-control type="text" id="description" ng-model="stadeForm.description" placeholder="description">
</div>
<div class="form-group" >
<label class=blue_font>checked</label>
<input class=form-control type="text" id="checked" ng-model="stadeForm.checked" placeholder="checked">
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="create()" id="Create" >Create</button>
</div>
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="refresh()" id="refresh">Refresh</button>
</div>
</div>
</div>
<div class="form-group" >
<label class=blue_font>ID</label>
<input class=form-control type="text" id="ID" ng-model="stadeForm.id" placeholder="ID">
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="deleteRec()" id="Delete" >Delete</button>
</div>
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="update()" id="Update">Update</button>
</div>
</div>
</div>
</form>
</div>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-resource.min.js"></script>
<script src=app/app.js"></script>
<link rel="stylesheet" href="bootsrap/style.css">
<link rel="stylesheet" href="bootsrap/theme-default.css">
<link rel="stylesheet" href="bootsrap/theme-blue.css">
<link rel="stylesheet" href="bootsrap/bootstrap.min.css">
<link rel="stylesheet" href="bootsrap/custom.css">
</body>
</html>
I don't know why it's not working and I saw the previous posts that have problems like mine but it didn't work
Error on the line <script src=app/app.js"></script>. Open " is missing.
It should be <script src="app/app.js"></script>
<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp">
<div ng-controller="StadeController">
<form name="stadeForm" >
<table class="table stripped">
<thead><tr><th>ID </th> <th>checked</th> <th>description</th></tr></thead>
<tbody><tr ng-repeat="row in stades">
<td><span ng-bind="row.id"></span></td>
<td><span ng-bind="row.description"></span></td>
<td><span ng-bind="row.checked"></span></td>
<td>
</tr> </tbody>
</table>
<p class="bg-info info-msg" id="info1">{{Message}}</p>
<div class="form-group" >
<label class=blue_font>description</label>
<input class=form-control type="text" id="description" ng-model="stadeForm.description" placeholder="description">
</div>
<div class="form-group" >
<label class=blue_font>checked</label>
<input class=form-control type="text" id="checked" ng-model="stadeForm.checked" placeholder="checked">
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="create()" id="Create" >Create</button>
</div>
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="refresh()" id="refresh">Refresh</button>
</div>
</div>
</div>
<div class="form-group" >
<label class=blue_font>ID</label>
<input class=form-control type="text" id="ID" ng-model="stadeForm.id" placeholder="ID">
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="deleteRec()" id="Delete" >Delete</button>
</div>
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="update()" id="Update">Update</button>
</div>
</div>
</div>
</form>
</div>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-resource.min.js"></script>
<script src="app/app.js"></script>
<link rel="stylesheet" href="bootsrap/style.css">
<link rel="stylesheet" href="bootsrap/theme-default.css">
<link rel="stylesheet" href="bootsrap/theme-blue.css">
<link rel="stylesheet" href="bootsrap/bootstrap.min.css">
<link rel="stylesheet" href="bootsrap/custom.css">
</body>
</html>
var app = angular.module('myApp', ['ngResource']);
app.controller('StadeController', ['$scope', '$resource',function($scope,$resource) {
function fetchAllStades(){
$scope.stades = $resource('http://localhost:8088/stades'
).query(function(data){return data;});
};
fetchAllStades();
$scope.refresh = function(){
fetchAllStades();
};
$scope.create = function(){
Stade = $resource(
"http://localhost:8088/stades",
{},
{save: {method:'POST',isArray:false}}
);
var stade = {};
stade.id = $scope.stadeForm.id;
stade.name = $scope.stadeForm.description;
stade.phoneNo = $scope.stadeForm.checked;
$scope.Message = Stade.save(stade);
$scope.stadeForm.id = "";
$scope.stadeForm.description="";
$scope.stadeForm.checked="";
};
$scope.deleteRec = function(){
Stade = $resource(
"http://localhost:8088/stades/:id",
{},
{save: {method:'DELETE', params: {id: '#id'}}}
);
Stade.delete({id: $scope.stadeForm.id}).then(function successCallback(response) {
$scope.Message = response;
}, function errorCallback(response) {
});
$scope.stadeForm.id = "";
$scope.stadeForm.description="";
$scope.stadeForm.checked="";
};
$scope.update = function(){
Stade = $resource(
"http://localhost:8088/stades/:id",
{},
{save: {method:'PUT', params: {id: '#id'}}}
);
var stade = {};
stade.id = $scope.stadeForm.id;
stade.description = $scope.stadeForm.description;
stade.checked = $scope.stadeForm.checked;
$scope.Message = Stade.save({id: $scope.stadeForm.id}, stade);
$scope.stadeForm.id = "";
$scope.stadeForm.description="";
$scope.stadeForm.checked="";
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<body ng-app="myApp">
<div ng-controller="StadeController">
<form name="stadeForm" >
<table class="table stripped">
<thead><tr><th>ID </th> <th>checked</th> <th>description</th></tr></thead>
<tbody><tr ng-repeat="row in stades">
<td><span ng-bind="row.id"></span></td>
<td><span ng-bind="row.description"></span></td>
<td><span ng-bind="row.checked"></span></td>
<td>
</tr> </tbody>
</table>
<p class="bg-info info-msg" id="info1">{{Message}}</p>
<div class="form-group" >
<label class=blue_font>description</label>
<input class=form-control type="text" id="description" ng-model="stadeForm.description" placeholder="description">
</div>
<div class="form-group" >
<label class=blue_font>checked</label>
<input class=form-control type="text" id="checked" ng-model="stadeForm.checked" placeholder="checked">
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="create()" id="Create" >Create</button>
</div>
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="refresh()" id="refresh">Refresh</button>
</div>
</div>
</div>
<div class="form-group" >
<label class=blue_font>ID</label>
<input class=form-control type="text" id="ID" ng-model="stadeForm.id" placeholder="ID">
</div>
<div class="btn-wrapper">
<div class="row-gutter-5">
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="deleteRec()" id="Delete" >Delete</button>
</div>
<div class="col-md-4 col-xs-6 col-sm-6">
<button class="btn btn_blue" type="button" data-ng-click="update()" id="Update">Update</button>
</div>
</div>
</div>
</form>
</div>
<script src="angular/angular.min.js"></script>
<script src="angular/angular-resource.min.js"></script>
<script src=app/app.js"></script>
<link rel="stylesheet" href="bootsrap/style.css">
<link rel="stylesheet" href="bootsrap/theme-default.css">
<link rel="stylesheet" href="bootsrap/theme-blue.css">
<link rel="stylesheet" href="bootsrap/bootstrap.min.css">
<link rel="stylesheet" href="bootsrap/custom.css">
</body>
</html>
Related
I'm simply trying to display comments that users put within a comment box. However, I'm having issues because it's within an ng-repeat directive. Let me show so you can better understand visually:
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Nuvi Interview Code Project</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body ng-controller="HomeController">
<div class="container-fluid">
<h1>Nuvi Interview Code Project</h1>
<form class="form-inline well well-sm clearfix">
<span class="glyphicon glyphicon-search"></span>
<input type="text" placeholder="Search" class="form-control" ng-model="search">
</form>
<div class="row">
<div class="col-sm-6" ng-repeat="actor in data | filter:search">
<div class="well well-sm">
<div class="row">
<div class="col-md-6">
<img ng-src="{{actor.actor_avator}}" class="img-rounded img-responsive well-image pull-left">
<h3 class="name" data-toggle="modal" data-target="#actor-info" ng-click="changeActiveActor(actor)">{{actor.actor_name}}</h3>
<hr>
<p ng-repeat="say in activity_comments">{{say}}</p>
<div>{{actor.activity_comments}} Comments {{actor.activity_likes}} likes {{actor.activity_shares}} shares</div>
<br>
<input type="text" class="form-control" placeholder="Write a comment..." ng-model="comment">
<button class="btn btn-default" ng-click="postComment($index, comment)">Post Comment</button>
</div>
<div class="col-md-6">
<p class="pull-right"><strong>{{actor.provider}} </strong></p>
<p><strong>Post</strong></p>
<h5>{{actor.activity_message}}</h5>
<br><br><br><br><br>
<button ng-click="countUp($index)" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-up"></span> Like
</button>
<button ng-click="countDown($index)" type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-thumbs-down"></span> Unlike
</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal" id="actor-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2>{{activeActor.actor_name}}</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<img ng-src="{{activeActor.actor_avator}}" class="img-rounded img-responsive">
</div>
</div>
<div class="row top-buffer">
<div class="col-md-6">
<p>Message: {{activeActor.activity_message}}</p>
<p><strong>Username:</strong> {{activeActor.actor_username}}</p>
<p><strong>Date:</strong> {{activeActor.activity_date}}</p>
<p><strong>Comment:</strong> {{activeActor.activity_comments}}</p>
<p><strong>Likes:</strong> {{activeActor.activity_likes}}</p>
<p><strong>Sentiment:</strong> {{activeActor.activity_sentiment}}</p>
<p><strong>Shares:</strong> {{activeActor.activity_shares}}</p>
<p><strong>ID:</strong> {{activeActor.id}}</p>
<p><strong>Provider:</strong> {{activeActor.provider}}</p>
</div>
<div class="col-xs-12">
<p></p>
<button class="btn btn-danger pull-right" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END OF MODAL -->
<hr>
<h6 class="pull-right">Coded by Saia Fonua</h6>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js:
var app = angular.module("MyApp", []);
app.controller("HomeController", ["$scope", "$http", function($scope, $http) {
$scope.data = [];
$scope.search = "";
$scope.comment = "";
$scope.activeActor = {};
$scope.changeActiveActor = function(index) {
$scope.activeActor = index;
}
$scope.postComment = function(index, comment) {
console.log('comment ', comment);
//$scope.data[index].comments = [];
$scope.data[index].comments.push(comment);
console.log($scope.data[index]);
}
$scope.countUp = function(index) {
$scope.data[index].activity_likes++;
}
$scope.countDown = function(index) {
$scope.data[index].activity_likes--;
}
$http.get("https://nuvi-challenge.herokuapp.com/activities").then(function(response) {
console.log(response.data);
$scope.data = response.data;
})
}])
Can someone please help me to get the comments to display. When you start playing around with it, you'll see why it's harder than the problem sounds!
You have some problems with this line
<p ng-repeat="say in activity_comments">{{say}}</p>
As you are adding the comments to
$scope.data[index].comments.push(comment);
They would be reached by the actor.comments object
<p ng-repeat="say in actor.comments">{{say}}</p>
I'm trying to display a date selected by bootstrap calendar date but I don't see the value of the date selected. Date is displaying correctly when I choose edit option to update it into the item list but If I change the date though the calendar that is not being updated after tag "Vigencia Desde Updated".
I appreciate any help on that.
app.js
angular.module('mainApp', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('mainApp').controller('NotificacionController', function($scope) {
$(document).ready(function(){
$('.input-group.date').datetimepicker({
locale: 'es',
});
});
var self = this;
self.notificacion = {
id: null,
vigenciaDesde: null,
vigenciaHasta: null,
cuotas: "",
marca: ""
}
self.notificaciones = [
{
id: 1,
vigenciaDesde: new Date(2016, 9, 1),
vigenciaHasta: new Date(2016, 9, 8),
cuotas: "3 cuotas",
marca: "Nike"
}, {
id: 2,
vigenciaDesde: new Date(2016, 10, 1),
vigenciaHasta: new Date(2016, 10, 20),
cuotas: "6 cuotas",
marca: "Adidas"
}
]
self.edit = function(id) {
console.log('id to be edited', id);
for (var i = 0; i < self.notificaciones.length; i++) {
if (self.notificaciones[i].id == id) {
self.notificacion = angular.copy(self.notificaciones[i]);
break;
}
}
}
self.reset = function(){
self.notificacion={id:null, vigenciaDesde:null, vigenciaHasta:null, cuotas:'', marca:''};
$scope.myForm.$setPristine(); //reset Form
};
});
index.html
<!doctype html>
<html ng-app="mainApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<!--script src="https://code.angularjs.org/1.0.7/i18n/angular-locale_es-ar.js"></script-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.3.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/es.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style-->
<div ng-controller="NotificacionController as ctrl">
<!-- Row Cuotas -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Cuotas</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.notificacion.cuotas" name="cuotas" class="cuotas form-control input-sm" placeholder="Cuotas" />
</div>
</div>
</div>
<!-- Row Marca -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Marca</label>
<div class="col-md-7">
<input type="text" ng-model="ctrl.notificacion.marca" name="marca" class="marca form-control input-sm" placeholder="Marca" />
</div>
</div>
</div>
<!-- Row Tipo de Vigencia Desde -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Desde</label>
<div class="col-md-7">
<div class='input-group date'>
<input type='text' class="form-control ctrl.notificacion.vigenciaDesde input-sm" id="vigenciaDesde" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy'">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!-- Row Tipo de Vigencia Hasta -->
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Hasta</label>
<div class="col-md-7">
<div class='input-group date vigenciaHasta' name="vigenciaHasta">
<input type='text' class="form-control vigenciaHasta" id="vigenciaHastaId" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="col-md-2 control-lable" for="file">Vigencia Desde Updated</label>
<div ng-model="ctrl.notificacion.vigenciaDesde">
<pre>Vigencia Desde Updated: <em>{{ctrl.notificacion.vigenciaDesde | date:'dd/MM/yyyy' }}</em></pre>
</div>
</div>
</div>
<div class="row">
<div class="form-actions floatRight">
<button type="button" ng-click="ctrl.reset()" class="btn btn-warning btn-sm" ng-disabled="myForm.$pristine">Reset Form</button>
</div>
</div>
<br/>
<div class="panel panel-default">
<div class="panel-heading"><span class="lead">Lista de Notificaciones Existentes </span></div>
<div class="tablecontainer">
<table class="table table-hover">
<thead>
<tr>
<th>ID.</th>
<th>Vigencia Desde</th>
<th>Vigencia Hasta</th>
<th>Cuotas</th>
<th>Marca</th>
<th width="20%"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="n in ctrl.notificaciones | orderBy:'id'">
<td><span ng-bind="n.id"></span></td>
<td><span ng-bind="n.vigenciaDesde | date:'dd/MM/yyyy'"></span></td>
<td><span ng-bind="n.vigenciaHasta | date:'dd/MM/yyyy'"></span></td>
<td><span ng-bind="n.cuotas"></span></td>
<td><span ng-bind="n.marca"></span></td>
<td>
<button type="button" ng-click="ctrl.edit(n.id)" class="btn btn-success custom-width">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
plunker link:
http://plnkr.co/edit/KFA4AsgQdItUfSWVc1Ag
You are injecting ui-bootstrap into your app by inserting 'ui.bootstrap' but you not using the uib-datepicker-popup directive.
ui-bootstrap doesn't require jquery, you were using some sort of jquery variant that isn't compatible with angular and didn't change the model.
you should remove filters from your ng-models, this
ng-model="ctrl.notificacion.vigenciaHasta | date:'dd/MM/yyyy'"
Doesn't work, you can't apply a filter on a model value, but only when displaying it in your template.
Remove the filters
ng-model="ctrl.notificacion.vigenciaHasta"
This is how your datpicker markup should look like
<div class='input-group date'>
<input uib-datepicker-popup type='text' is-open="open" class="form-control" ng-required="true" close-text="Close" ng-model="ctrl.notificacion.vigenciaDesde">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open = !open"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
Noticed I've added the is-open attribute to open and close the picker from the right button.
Here is an updated plunker
I have a form set up that takes values and saves them into an object in a firebase array. I used ng-repeat to display each object in that array in a "dashboard" page. I want to be able to alter the specific object that gets created via checkboxes. I cannot figure out how to get the specific object.
var app = angular.module('app', ['ngRoute','firebase','ngMaterial']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/second', {
templateUrl: 'templates/second.html',
controller: 'homeCTRL'
})
.when('/dashboard', {
templateUrl: 'templates/dashboard.html',
controller: 'homeCTRL'
})
.when('/vehicles', {
templateUrl: 'templates/vehicles.html',
controller: 'homeCTRL'
})
.otherwise({
redirectTo: '/dashboard'
});
}]);
//controllers
app.controller('homeCTRL', ['$scope', '$log','$firebaseArray', function($scope,$log,$firebaseArray) {
var ref = new Firebase("https://asgtodo.firebaseio.com");
$scope.newItem = '';
$scope.FBproject= $firebaseArray(ref.child('project'));
$scope.FBhistory = $firebaseArray(ref.child('history'));
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
$scope.pipeCompleted = false;
$scope.addItem = function() {
$scope.FBproject.$add({
projectName: $scope.projectName,
dateStart: $scope.dateStart,
dateEnd: $scope.dateEnd,
signChecked: $scope.signChecked,
paintChecked: $scope.paintChecked,
blastChecked: $scope.blastChecked,
labelChecked: $scope.labelChecked,
yellowMacro: $scope.yellowMacro,
redMacro: $scope.redMacro,
otherPaint: $scope.otherPaint,
pipeFootage: $scope.pipeFootage,
maxHeight: $scope.maxHeight,
liftSmall: $scope.liftSmall,
liftLarge: $scope.liftLarge,
liftBoom: $scope.liftBoom,
pipeCompleted: $scope.pipeCompleted
});
$scope.projectName = '';
$scope.dateStart = '';
$scope.dateEnd = '';
$scope.signChecked = '';
$scope.paintChecked = '';
$scope.blastChecked = '';
$scope.labelChecked = '';
$scope.yellowMacro = '';
$scope.redMacro = '';
$scope.otherPaint = '';
$scope.pipeFootage = '';
$scope.maxHeight = '';
$scope.liftSmall = '';
$scope.liftLarge = '';
$scope.liftBoom = '';
};
$scope.changePipe = function(x){
$scope.index = $scope.FBproject.indexOf(x);
};
$scope.rmList = function(item) {
//get index of displayHold
$scope.index = $scope.FBproject.indexOf(item);
//add it to historylist
$scope.FBhistory.$add($scope.FBproject[$scope.index]);
$scope.FBproject.$remove($scope.FBproject[$scope.index]);
};
$scope.modalItem = function(item){
return null;
};
}]);
app.controller('secondCTRL', ['$scope', function($scope) {
}]);
Here is the html
<!-- MODAL BUTTON -->
<div style="margin-top: 6em;">
<div class="row animated shake">
<div class="col s6 m5 l5">
<center>
<a class="btn-floating btn-large waves-effect waves-dark blue modal-trigger" id="modal" href="#modal1">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
</div>
<!-- MODAL -->
<div id="modal1" class="modal bottom-sheet white" style="height: 100%; opacity: 0.8">
<div class="modal-content white blue-text">
<div class="row">
<form>
<div class="row animated rollIn">
<div class="input-field col s12 m6 l6">
<input id="projName" type="text" ng-model="projectName">
<label id="projNameLabel">Project Name</label>
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">Start Date</label>
<input id="projDate" type="date" class="datepicker " ng-model="dateStart">
</div>
<div class="input-field col s12 m3 l3">
<label id="projDateLabel">End Date</label>
<input id="projDate" type="date" class="datepicker" ng-model="dateEnd">
</div>
</div>
<div class="row">
<div class="col s12 m2 l2">
<center>
<form action="#">
<p class="padBoxes">
<input type="checkbox" id="Signs" class="Materialize.showStaggeredList('#test')" ng-model="signChecked"/>
<label for="Signs">Signs</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Paint" ng-model="paintChecked"/>
<label for="Paint">Paint</label>
</p>
<p ng-show="paintChecked" style="margin-left: 15px;" class="padBoxes">
<input type="checkbox" id="Blast" ng-model="blastChecked"/>
<label for="Blast">Blast</label>
</p>
<p class="padBoxes">
<input type="checkbox" id="Labels" ng-model="labelChecked"/>
<label for="Labels">Labels</label>
</p>
</form>
</center>
</div>
<div class="col s12 m3 l3 z-depth-5" style="margin-right: 10px;" ng-show="paintChecked">
<center class="animated fadeIn">
<form action="#">
<div class="indigo z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Paint</h5>
</p>
</div>
<p class="range-field padBoxes">
<label for="Labels">Yellow 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="yellowMacro"/>
</p>
<p class="range-field padBoxes">
<label for="Labels">Red 646 Paint</label>
<input type="range" id="test5" min="0" max="50" ng-model="redMacro"/>
</p>
<p class="input-field padBoxes">
<input id="projName" type="text" ng-model="otherPaint">
<label>Other</label>
</p>
</form>
</center>
</div>
<div class="col s12 m2 l3 z-depth-3" style="margin-right: 10px;" ng-show="signChecked">
<form action="#">
<div class="col s12 animated fadeIn">
<center>
<div class="red z-depth-2" style="height: 60px;margin-bottom: 30px;">
<p>
<h5 style="color: white; padding: 15px; float:left; font-weight: condensed">Signs</h5>
</p>
</div>
<p class="input-field">
<input id="projName padBoxes" type="text" ng-model="pipeFootage">
<label>Pipe Footage</label>
</p>
<p class="range-field padBoxes">
<label for="Labels ">Max Height</label>
<input type="range" id="test5" min="0" max="50" ng-model="maxHeight"/>
</p>
</center>
</div>
</form>
</div>
<div class="col s12 m2 l2 " style="margin-right: 10px;" ng-show="signChecked || labelChecked">
<center>
<p >
<input type="checkbox" id="liftSmall" ng-model="liftSmall"/>
<label for="liftSmall">Lift 3246</label>
</p>
<p >
<input type="checkbox" id="liftLarge" ng-model="liftLarge"/>
<label for="liftLarge">Lift 4069</label>
</p>
<p >
<input type="checkbox" id="liftBoom" ng-model="liftBoom"/>
<label for="liftBoom">Lift BOOM!</label>
</p>
</center>
</div>
</div>
</div>
</form>
</div>
<div class="input-field col s12 m2 l2 padBoxes" style="margin: -50px;">
<center>
<a href="#!" class="modal-action modal-close waves-effect waves-dark btn-flat z-depth-2">
<i class="material-icons" style="font-size: 3em;">close</i>
</a>
<a class="btn-floating btn-large waves-effect waves-dark blue z-depth-2" onclick="Materialize.toast('Project Added', 4000)" ng-click="addItem()">
<i class="material-icons">add</i>
</a>
</center>
</div>
</div>
<!-- FBproject -->
<div class="container row" style="margin-top: 4em; ">
<ul class="collapsible" data-collapsible="accordion">
<li ng-repeat="x in FBproject track by $index">
<div class="collapsible-header waves-effect waves-dark">
<div class="col s2 m2 l1">
<center>
<i class="material-icons">folder-open</i>
</center>
</div>
<div class="col s5 m2 l2">
{{x.projectName}}
</div>
<div class="col s12 m5 l4">
<center>
<div class="chip">Signs</div>
<div class="chip">Paint</div>
<div class="chip">Labels</div>
</center>
</div>
</div>
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="{{}}" />
<label for="pipe">Pipe Ordered</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="hotel">Hotel</label>
</p>
<p>
<input type="checkbox" id="{{x.index}}"/>
<label for="lifts">
<h7>lifts</h7>
</label>
</p>
<a class="btn-floating btn-large waves-effect waves-dark red" ng-click="rmList(x)">
<i class="material-icons">delete_forever</i>
</a>
</form>
</center>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.collapsible').collapsible({accordion: false});
$('.modal-trigger').leanModal({dismissible: true, opacity: .50, in_duration: 300, out_duration: 200});
$('.datepicker').pickadate({selectMonths: true, selectYears: 15, container: 'body'});
$('select').material_select({container: 'body'});
$(".button-collapse").sideNav();
});
</script>
index.html
<!DOCTYPE HTML>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="//cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<script src="//cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="main.css"/>
</head>
<body ng-cloak>
<div>
<div class="fixed-action-btn horizontal click-to-toggle" style="top: 5px; center: 24px;">
<a class="btn-floating waves-effect waves-dark btn-large">
<i class="material-icons">menu</i>
</a>
<ul>
<li>
<a href="#/dashboard" class="btn-floating waves-effect waves-dark btn-large yellow darken-1">
<i class="material-icons">dashboard</i>
</a>
</li>
<li>
<a href="#/second" class="btn-floating waves-effect waves-dark blue btn-large green darken-1">
<i class="material-icons">find_in_page</i>
</a>
</li>
<li>
<a href="#/vehicles" class="btn-floating waves-effect waves-dark btn-large red darken-1">
<i class="material-icons">directions_car</i>
</a>
</li>
</ul>
</div>
</div>
<div ng-view></div>
</body>
</html>
section is question?
<div class="collapsible-body">
<div class="row">
<center>
<form action="#">
<p>
<input type="checkbox" ng-model="x.pipeCompleted{{index}}"/> <!-- what do I put here ?? to get the specific object-->
<label for="pipe">Pipe Ordered</label>
</p>
<p>
Try this:
<input type="checkbox" ng-model="pipeCompleted[$index]"/>
I wand to create the login for rest-full api. I want to create similar application when page open first time then It pop-up with the login page. How I want to make Please see DEMO. This is developed in knockout+flask rest-api. I want to make same but I want to use Angularjs instead of Knockout.
My Code DEMO, In this I remove all the other code. Just want when page load It loads with login, and when I insert correct login credential it Login to rest-api.
rest-server.py
import six
from flask import Flask, jsonify, abort, request, make_response, url_for, render_template
from flask.ext.httpauth import HTTPBasicAuth
app = Flask(__name__, static_url_path="")
auth = HTTPBasicAuth()
#auth.get_password
def get_password(username):
if username == 'admin':
return '1234'
return None
#auth.error_handler
def unauthorized():
return make_response(jsonify({'error': 'Unauthorized access'}), 403)
#app.errorhandler(400)
def bad_request(error):
return make_response(jsonify({'error': 'Bad request'}), 400)
#app.errorhandler(404)
def not_found(error):
return make_response(jsonify({'error': 'Not found'}), 404)
tasks = [
{
'id': 1,
'title': u'Buy groceries',
'description': u'Milk, Cheese, Pizza, Fruit, Tylenol',
'done': False
},
{
'id': 2,
'title': u'Learn Python',
'description': u'Need to find a good Python tutorial on the web',
'done': False
}
]
def make_public_task(task):
new_task = {}
for field in task:
if field == 'id':
new_task['uri'] = url_for('get_task', task_id=task['id'],
_external=True)
else:
new_task[field] = task[field]
return new_task
#app.route('/')
#auth.login_required
def index():
return render_template('index.html')
#app.route('/todo/api/v1.0/tasks', methods=['GET'])
#auth.login_required
def get_tasks():
return jsonify({'tasks': [make_public_task(task) for task in tasks]})
#app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['GET'])
#auth.login_required
def get_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
return jsonify({'task': make_public_task(task[0])})
#app.route('/todo/api/v1.0/tasks', methods=['POST'])
#auth.login_required
def create_task():
if not request.json or 'title' not in request.json:
abort(400)
task = {
'id': tasks[-1]['id'] + 1,
'title': request.json['title'],
'description': request.json.get('description', ""),
'done': False
}
tasks.append(task)
return jsonify({'task': make_public_task(task)}), 201
#app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['PUT'])
#auth.login_required
def update_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
if not request.json:
abort(400)
if 'title' in request.json and \
not isinstance(request.json['title'], six.string_types):
abort(400)
if 'description' in request.json and \
not isinstance(request.json['description'], six.string_types):
abort(400)
if 'done' in request.json and type(request.json['done']) is not bool:
abort(400)
task[0]['title'] = request.json.get('title', task[0]['title'])
task[0]['description'] = request.json.get('description',
task[0]['description'])
task[0]['done'] = request.json.get('done', task[0]['done'])
return jsonify({'task': make_public_task(task[0])})
#app.route('/todo/api/v1.0/tasks/<int:task_id>', methods=['DELETE'])
#auth.login_required
def delete_task(task_id):
task = [task for task in tasks if task['id'] == task_id]
if len(task) == 0:
abort(404)
tasks.remove(task[0])
return jsonify({'result': True})
if __name__ == '__main__':
app.run(debug=True)
My angular code angularjs.html
<!DOCTYPE html>
<html>
<head>
<title>ToDo API Client Demo By Angularjs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="tasksCtrl">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">ToDo API Client Demo</a>
</div>
</div>
<div>
<a class="btn" data-toggle="modal" data-target="#login">Login</a>
</div>
<div>
<table class="table table-striped">
<tbody>
<tr>
<td style="width: 1px;"></td>
<td>
<b>Task</b>
</td>
<td>
<b>Options</b>
</td>
</tr>
<tr ng-repeat="task in tasks">
<td>
<span ng-show="done" class="label label-success">Done</span>
<span ng-hide="done" class="label label-important">In Progress</span>
</td>
<td>{{task.title}}</td>
<td>{{task.description}}</td>
<td>
<a class="btn" data-toggle="modal" data-target="#modal" ng-click="editTask(task)">Edit</a>
</td>
<td>
<a class="btn" data-toggle="modal" data-ng-click="removeRow(task)">Delete</a>
</td>
<td ng-show="done">
<span>
<button ng-click="done = !done" class="btn">Mark In Progress</button>
</span>
</td>
<td ng-hide="done">
<span>
<button ng-click="done = !done" class="btn">Mark Done</button>
</span>
</td>
</tr>
</tbody>
</table>
<a class="btn" data-toggle="modal" data-target="#add" ng-click="editTask(task)">Add Task</a>
</div>
<div id="modal" role="dialog" class="modal hide fade">
<div>
<div class="modal-header">
Task Dialog
</div>
<div class="modal-body">
<label for="txtName"></label>
<input type="text" ng-model="selectedTask.title" />
<input type="text" ng-model="selectedTask.description" />
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="saveTask()" data-dismiss="modal">OK</button>
</div>
</div>
</div>
<div id="add" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="addDialogLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="addDialogLabel">Add Task</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputTask">Task</label>
<div class="controls">
<input type="text" id="inputTask" ng-model="task1" placeholder="Task title" style="width: 150px;" />
<br />
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputDescription">Description</label>
<div class="controls">
<input type="text" id="inputDescription" ng-model="description1" placeholder="Description" style="width: 300px;" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="addNewTask()" data-dismiss="modal">Add Task</button>
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
<div id="login" class="modal hide fade" tabindex="=1" role="dialog" aria-labelledby="loginLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="loginLabel">Sign In</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputUsername">Username</label>
<div class="controls">
<input data-bind="value: username" type="text" id="inputUsername" placeholder="Username">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Password</label>
<div class="controls">
<input data-bind="value: password" type="password" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button data-bind="click: login" class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Sign In</button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('tasksCtrl', function($scope, $http) {
//$http.get("data.json")
$http.get("/todo/api/v1.0/tasks")
.success(function(response) {
console.log(response.tasks)
$scope.tasks = response.tasks;
});
$scope.editTask = function(task) {
$scope.selectedTask = task;
};
$scope.removeRow = function(task) {
$scope.tasks.splice(task, 1);
};
$scope.addNewTask = function() {
//$scope.tasks.push({title :$scope.task1,description: $scope.description1});
$scope.tasks.push({title: $scope.task1, description: $scope.description1});
$scope.task1 = '';
$scope.description1 = '';
// $scope.tasks.push('dhsh');
};
});
/*
app.controller('addNewTaskCtrl', ['$scope', function($scope){
$scope.addNewTask=function(){
var task;
}
}]);*/
</script>
</body>
</html>
Your login page is rendering but what i see here is Class modal hide fade is not set.Try using class="modal" in login div instead of class="modal hide fade"
I have a button (link) on a modal that when clicked (copySummaryToTask($event)) is supposed to copy data from the page's $scope element (thisRequest) into the modal's $scope element (nTask). It copies the correct data into the $scope but the data doesn't appear in the modal even though I am using $scope.$apply();
Here's the plunkr.
Here's my controller:
var myApp = angular.module('myApp', []);
myApp.controller('MainController', function($scope){
$scope.NewTaskPane = false;
$scope.thisRequest = {
ID: 543,
Title: 'Create This Wonderful SharePoint 2013 SPA',
Request_Summary: "Rule fruit and under female she'd every signs creepeth good Night, fly lesser they're be green cattle and living tree also spirit us years two. Seasons he good under creepeth fifth air is. For morning. It creeping multiply from, saying.",
Request_Type: 'Web'
};
$scope.Tasks = [
{ID: 20, Title: 'Prototype App', Assigned_To: 'Wayne, Bruce', Status: 'Completed', TOT: 4.5},
{ID: 21, Title: 'Develop App CSS', Assigned_To: 'Prince, Diana', Status: 'Completed', TOT: 6}
];
$scope.addNewTask = function($event){
$event.preventDefault();
$scope.NewTaskPane = true;
$scope.nTask = {
ID: $scope.Tasks.length + 1,
Request_ID: $scope.thisRequest.ID,
Title: $scope.thisRequest.Title,
Status: 'Assigned',
Resource_Instructions: ''
};
};
$scope.copySummaryToTask = function($event){
$event.preventDefault();
//alert($scope.thisRequest.Request_Summary);
$scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
if (!$scope.$$phase) { $scope.$apply(); }
} // end copySummaryToTask fn
}); // end main controller
and here's the view:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<div id="overlay" data-ng-show="NewTaskPane">
<div class ="preference_form wModal" id="frmPreference">
<form name="frmNewTask" ng-submit="saveNewTask($event)">
<span class="close-modal">
close
</span>
<h1>New Task</h1>
<div class="row">
<div class="form-group col-lg-12">
<label for="description">Task Title:</label>
<input type="text" class="form-control" name="Title" ng-model="nTask.Title">
</div>
</div>
<div class="row">
<div class="form-group col-lg-12">
<label>Additional Instructions for Resource:</label>
<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
<button class="btn btn-link" style="float:right;" ng-click="copySummaryToTask($event)">Copy Customer Request Summary.</button>
</div>
</div>
<div class="frmElementSubmit">
<input type="button" class="btn btn-default" value="CANCEL" ng-click="NewTaskPane = false" />
<input type="submit" class="btn btn-primary" value="SAVE" ng-click="NewTaskPane = false" />
</div>
</form>
<pre>{{nTask | json}}</pre>
</div>
</div>
<div class="frmFull_Page">
<h1 class="frmTitle">Edit Request</h1>
<div class="frmBar clr-purple">
<h3>Request Information</h3>
</div>
<div class="frm_pane">
<div class="row">
<form name="EditSapForm" role="form">
<!-- ID / TITLE -->
<div class="row">
<div class="form-group col-lg-3">
<label for="req_id">Request ID:</label>
<input type="text" class="form-control" name="ID" ng-model="thisRequest.ID" disabled="disabled">
</div>
<div class="form-group col-lg-9">
<label for="title">Title:</label>
<input type="text" class="form-control" id="Title" ng-model="thisRequest.Title">
</div>
</div>
<!-- WORK SUMMARY -->
<div class="row">
<div class="form-group col-lg-12">
<label>Work Summary:</label>
<textarea name="Request_Summary" class="form-control" rows="5" ng-model="thisRequest.Request_Summary"></textarea>
</div>
</div>
<!-- WORK TASKS*** -->
<div class="row">
<div class="form-group col-lg-12">
<div class="row">
<div class="form-group col lg-12" style="margin-left:16px;">
<label>Work Tasks [{{Tasks.length}}]</label>
<table class="table table-striped" style="width:90%; margin:5px auto;">
<tr>
<th>ID</th>
<th>TITLE</th>
<th>ASSIGNED TO:</th>
<th>STATUS</th>
<th>TOT</th>
<th> </th>
</tr>
<tr ng-hide="Tasks.length">
<td colspan="6"><b>No Tasks Found!</b></td>
</tr>
<tr ng-repeat="task in Tasks">
<td>{{task.ID}}</td>
<td>{{task.Title}}</td>
<td>{{task.Assigned_To}}</td>
<td>{{task.Status}}</td>
<td>{{task.TOT}}</td>
<td>edit</td>
</tr>
<tr>
<td colspan="6"><a ng-click="addNewTask($event)">Add New Task</a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- SUBMIT BUTTON*** -->
<div class="row" style="margin-top:30px;">
<div class="form-actions col-lg-12">
<button type="submit" class="btn btn-primary">SUBMIT</button>
</div>
</div>
</form>
</div> <!-- end row -->
</div> <!-- end frm_pane -->
</div> <!-- end frmFull_Page-->
</body>
</html>
There's a typo in your view:
<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
... where ntask should be nTask. Once you fix it, you won't need the $scope.apply():
$scope.copySummaryToTask = function($event){
$event.preventDefault();
$scope.nTask.Resource_Instructions = $scope.thisRequest.Request_Summary;
} // end copySummaryToTask fn
Replace
<textarea class="form-control" rows="5">{{ntask.Resource_Instructions}}</textarea>
With
<textarea class="form-control" rows="5" ng-model="nTask.Resource_Instructions"></textarea>
This will do it, plus capture any new text added by the user.