<h2>Your TO DOs</h2>
<div class="list-group" ng-repeat="i in tasks track by $index">
<div href="#" class="list-group-item" style="overflow:auto;">
<span id={{$index}} style="background:{{i.priority}};padding:1%; border:#bfb9b9; border-style:dotted;">{{i.note}} </span>
<h5 style="float:right;">
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue;" ng-disabled = '{{i.priority==="red"}}' ng-click = 'impTask(i)' >Imp</button>
ng-disabled = '{{i.priority==="red"}}' this line in the code isn't functioning though on inspection through DOM, its value is being displayed "true".
Here is the complete code
https://gist.github.com/7a3c7fd977c115638d386097f7c48b72.git
You should not use annotation with ng-disabled
Change
FROM
ng-disabled = '{{i.priority==="red"}}'
TO
ng-disabled = 'i.priority==="red"
DEMO
var app = angular.module('myApp', []);
app.controller('personCtrl', function($scope) {
$scope.tasks = [{note:"Do the laundry", priority:'yellow'},{note:"Meeting at 10.00", priority:'yellow'}];
$scope.removeTask = function(task) {
var removedTask = $scope.tasks.indexOf(task);
$scope.tasks.splice(removedTask, 1);
};
$scope.addTask = function(){
if($scope.newTask!= null && $scope.newTask!= "" )
$scope.tasks.push({note:$scope.newTask,priority:'yellow'});
$scope.newTask= "";
};
$scope.impTask = function(task) {
var editedTask = $scope.tasks.indexOf(task);
$scope.tasks.splice(editedTask, 1);
task.priority= "red";
$scope.tasks.unshift(task);
};
});
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<div class="container" ng-controller="personCtrl" style="margin:5%;">
<div>
<form ng-submit="addTask()">
<input type="text" onClick="this.select()" placeholder="enter the task" ng-model="newTask"/>
<input type="submit" value="Add a new task" />
</form>
</div>
<h2>Your TO DOs</h2>
<div class="list-group" ng-repeat="i in tasks track by $index">
<div href="#" class="list-group-item" style="overflow:auto;">
<span id={{$index}} style="background:{{i.priority}};padding:1%; border:#bfb9b9; border-style:dotted;">{{i.note}} </span>
<h5 style="float:right;" >
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue;" ng-disabled = 'i.priority==="red"' ng-click = 'impTask(i)' >Imp</button>
</span>
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue; " ng-click = 'strikeTask(i)'>Done</button>
</span>
<span>
<button class="btn-xs" style="border:none;background: cornflowerblue;" ng-click = 'editTask(i)' >Edit</button>
</span>
<a ng-click="removeTask(i)" style="padding-left:5px; padding-right:5px; color: red; font-weight: 800; background:#dad4d4";>X</a>
</div>
</div>
</body>
</html>
Related
I have list of stories with images , content and title in ng-repeat.
When I click on particular story , I need a bootstrap model to open and values to be displayed . I am doing it by calling a function showStories(); But I couldnt do it . I am getting empty value since its globally declared as
$scope.selectedStoryPreview = "";
$scope.selectedStoryContent = "";
$scope.selectedStoryTitle = "";
Html :
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storyPreview">
<button><span>{{item.title}}</span>
</button>
</div>
JS:
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
Modal :
<div class="modal fade" id="storyPreview" role="dialog" data-keyboard="false" data-backdrop="static" style="padding-top: 8em;">
<div class="modal-dialog">
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;">close</button>
</div>
</div>
$scope.model is undefined. Set it as $scope.model = {} This way
you can dynamically add properties to it at compile time.
Moreover, you could use data-toggle="modal"
data-target="#viewdetails" as the action event to point to correct
modal.
Also, no need to pass individual properties as arguments in the
method showStories(item), you could send out complete object and
obtain its properties.
DEMO:
Click on the image to open modal.
function MyCtrl($scope) {
$scope.filteredStories = [{
id: 1,
images: 'sample1.png',
title: "sample1",
content: "content here..."
}, {
id: 2,
images: 'sample2.png',
title: "sample2",
content: "content here..."
}, {
id: 3,
images: 'sample3.png',
title: "sample3",
content: "content here..."
}, {
id: 4,
images: 'sample4.png',
title: "sample4",
content: "content here..."
}]
$scope.showStories = function(item) {
$scope.selectedStoryPreview = item.images;
$scope.selectedStoryContent = item.content;
$scope.selectedStoryTitle = item.title;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body ng-app ng-controller="MyCtrl">
<div class="image" ng-repeat="item in filteredStories track by $index">
<img ng-src="{{item.images}}" style="cursor: pointer;" ng-click="showStories(item)" data-toggle="modal" data-target="#storypreview">
<button><span>{{item.title}}</span>
</button>
</div>
<div class="modal fade" id="storypreview" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" style="text-align: center;">
<div class="modal-header imagemodalhead">
<h4>{{selectedStoryTitle}}</h4>
<a class="edit" ng-click="openmanageprofile()"><img src="css/images/edit.png">
</a>
</div>
<div class="modal-body" style="background: #eee;">
<div class="row">
<img class="file-imageStory" ng-src="{{selectedStoryPreview}}" />
</div>
<br>
<div class="row">
<div class=" col-sm-12 storyPrv">
<span class="styletheStory">{{selectedStoryContent}}</span>
</div>
</div>
<div class="modal-footer imagefooter">
<button type="button" class="button share" ng-click="closePreview()" style="background-color: #7B7D7D; color: black;" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</div>
</body>
If modal controller is different. Then send the value using resolve method. If the controller is same. Then I think it should display the values.
And provide the id of modal here :
<div class="modal-content" id="storyPreview" style="text-align: center;">
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>
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]"/>