I'm trying to build an app in angularJS and materializeCSS. The page loads, but I have a button that should open a pop-up form and although I tried several times, I can't figure out the problem :(
I've tried with <a href> but it's the same problem, I can't see any pop and as well, I don't see any errors in the console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Products</title>
<link rel="stylesheet" href="libs/css/materialize.min.css" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
.width-30-pct{
width:30%;
}
.text-align-center{
text-align:center;
}
.margin-bottom-1em{
margin-bottom:1em;
}
</style>
</head>
<body>
<div class="container" ng-app="myApp" ng-controller="productsCtrl">
<div class="row">
<div class="col s12">
<h4>Products</h4>
<!-- used for searching the current list -->
<input type="text" ng-model="search" class="form-control" placeholder="Search product..."/>
<!-- table that shows product record list -->
<table class="hoverable bordered">
<thead>
<tr>
<th class="text-align-center">ID</th>
<th class="width-30-pct">Name</th>
<th class="width-30-pct">Description</th>
<th class="text-align-center">Price</th>
<th class="text-align-center">Action</th>
</tr>
</thead>
<tbody ng-init="getAll()">
<tr ng-repeat="d in names | filter:search">
<td class="text-align-center">{{ d.id }}</td>
<td>{{ d.name }}</td>
<td>{{ d.description }}</td>
<td class="text-align-center">{{ d.price }}</td>
<td>
<a ng-click="readOne(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">edit</i>Edit</a>
<a ng-click="deleteProduct(d.id)" class="waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">delete</i>Delete</a>
</td>
</tr>
</tbody>
</table>
<!-- floating button for creating product -->
<div class="fixed-action-btn" style="bottom:45px; right:24px;">
<!-- <a class="btn-floating btn-large waves-effect waves-light red" href="#modal1" ng-click="showCreateForm()"><i class="material-icons">add</i></a> */-->
<button data-target="modal1" class="btn-floating btn-large waves-effect waves-light red" ng-click="showCreateForm()">Add</button>
</div>
<!-- modal for for creating new product -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4 id="modal-product-title">Create New Product</h4>
<div class="row">
<div class="input-field col s12">
<input ng-model="name" type="text" class="validate" id="form-name" placeholder="Type name here..." />
<label for="name">Name</label>
</div>
<div class="input-field col s12">
<textarea ng-model="description" type="text" class="validate materialize-textarea" placeholder="Type description here..."></textarea>
<label for="description">Description</label>
</div>
<div class="input-field col s12">
<input ng-model="price" type="text" class="validate" id="form-price" placeholder="Type price here..." />
<label for="price">Price</label>
</div>
<div class="input-field col s12">
<a id="btn-create-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="createProduct()"><i class="material-icons left">add</i>Create</a>
<a id="btn-update-product" class="waves-effect waves-light btn margin-bottom-1em" ng-click="updateProduct()"><i class="material-icons left">edit</i>Save Changes</a>
<a class="modal-action modal-close waves-effect waves-light btn margin-bottom-1em"><i class="material-icons left">close</i>Close</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js"></script>
<!--angular -->
<script src="libs/js/angular.min.js"></script>
<script>
// angular js codes will be here
var app = angular.module('myApp', []);
app.controller('productsCtrl', function($scope, $http) {
$scope.showCreateForm = function(){
// clear form
$scope.clearForm();
// change modal title
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
}
// clear variable / form values
$scope.clearForm = function(){
$scope.id = "";
$scope.name = "";
$scope.description = "";
$scope.price = "";
}
// create new product
$scope.createProduct = function(){
// fields in key-value pairs
$http.post('create_product.php', {
'name' : $scope.name,
'description' : $scope.description,
'price' : $scope.price
}
).success(function (data, status, headers, config) {
console.log(data);
// tell the user new product was created
Materialize.toast(data, 4000);
// close modal
$('#modal-product-form').closeModal();
// clear modal content
$scope.clearForm();
// refresh the list
$scope.getAll();
});
}
});
// jquery codes will be here
</script>
<script>
$(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal();
});
</script>
</body>
</html>
In your showCreateForm function you need to add code to show the modal:
$scope.showCreateForm = function(){
// clear form
$scope.clearForm();
// change modal title
$('#modal-product-title').text("Create New Product");
// hide update product button
$('#btn-update-product').hide();
// show create product button
$('#btn-create-product').show();
// show modal
$('#modal1').show();
}
Here it is in Plunker with the above fix:
https://plnkr.co/edit/sUb43sKyBGaIGpBXvcrP?p=preview
Try using directives instead of jQuery code in controllers. There are repos that have angular+materilizecss in GitHub
Check : http://krescruz.github.io/angular-materialize/#getting-started
Related
I am new to AngularJS and need some help to solve an issue routing to another html page while passing a parameter. My application has a form with input fields (name & course). That information the user inputs will display in a table that is hidden unless it has data to display.
The issue is when clicking on the Display Info link, I am not being routed to the DisplayInfo.html page.
Here is the code: http://plnkr.co/edit/6WpZYkKMy0B4Vl8Phtnw?p=preview
app.js file
var app = angular.module('student', []);
app.controller('StudentController', function($scope) {
$scope.studentList = [];
$scope.addStudent = function() {
this.studentList.push({
name: $scope.getName,
course: $scope.getCourse,
date: new Date()
});
$scope.getName = "";
$scope.getCourse = "";
};
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/DisplayInfo/:name', {
templateUrl: 'DisplayInfo.html',
controller: 'DisplayInfoController'
});
}
]);
app.controller('DisplayInfoController', function($scope, $routeParams) {
$scope.name = $routeParams.getName;
});
});
Index.html
<!DOCTYPE html>
<html ng-app="student">
<head>
<link rel="stylesheet" type="text/css" href="student.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="header">
<h1>Student Access</h1>
<p>
<fieldset>
<br />
<br />
<form ng-controller="StudentController as studentCtrl" ng-submit="addStudent()">
<div ng-if="studentList.length > 0">
<table class="table table-striped">
<tr>
<th>
Name
</th>
<th>
Course
</th>
<th>
Date
</th>
</tr>
<tr ng-repeat="getStudent in studentList track by $index">
<td ng-bind="getStudent.name">
</td>
<td ng-bind="getStudent.course">
</td>
<td ng-bind="getStudent.date | date:'MM-dd-yyyy'">
</td>
<td>Display Info</td>
</tr>
</table>
</div>
<div ng-view></div>
<br />
<fieldset class="form-group">
<legend><strong>First Name</strong></legend>
<input ng-model="getName" type="text" class="form-control" title="Name" placeholder="Enter Student Name" />
</fieldset>
<fieldset class="form-group">
<legend><strong>Course</strong></legend>
<input ng-model="getCourse" type="text" class="form-control" title="Course" placeholder="Enter Course" />
</fieldset>
<input type="submit" class="btn btn-primary pull-right" value="Add Info" />
</form>
</fieldset>
</div>
</div>
<!-- AngularJS Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"> </script>
<script src="app.js"></script>
</body>
DisplayInfo.html
Name: {{getStudent.name}}
Here are the details for todo item: #{{getStudent}.
I think a / is missing in :
<td>Display Info</td>
It should be :
<td>Display Info</td>
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 am experiencing a weird problem. I have created a "Mobile Call Report" Form in Salesforce. This form can be accessed via the browser as well as the Salesforce1 App via your mobile device. Recently I added two picklist dropdown menues to this form. When I view this form(and the picklist menu) in my browser, everything looks and works great. But the weird thing is, when I view it in my mobile app, I select a value from the picklist, it selects the value one below what I selected. Then I will go ahead tap anywhere on the form and then it ends up selecting what I actually chose. Has anyone experienced anything like this before. I have added some snippets of my Angular code below. If anyone needs to see any backend APEX classes, I can add some of that as well. Thank you
<apex:page showHeader="false" sidebar="false" standardStylesheets="false" docType="html-5.0"
applyHtmlTag="false"
applyBodyTag="false">
<head>
<meta charset="utf-8"/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<apex:stylesheet value="{!URLFOR($Resource.sf1MobilePackDist,'sf1MobilePackDist/css/bootstrap-namespaced.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.sf1MobilePackDist,'sf1MobilePackDist/css/docs.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.s1styles_css)}"/>
<script type="text/ng-template" id="internalAttendeeTypeAheadSearch.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span><br/>
<span bind-html-unsafe="match.model.User__r.Department"></span>
</a>
</script>
<script type="text/ng-template" id="distTypeAheadSearch.html">
<a>
<span bind-html-unsafe="match.label | typeaheadHighlight:query"></span><br/>
</a>
</script>
<script type="text/ng-template" id="errorTemplate">
</script>
</head>
<body>
<div class="bootstrap-sf1" ng-class="overflow">
<!-- 2. actual template place holder -->
<div id="header" class="page-header page-header-anchor">
<table style="width: 100%;" >
<thead>
<col style="width:20%" />
<col style="width:80%" />
</thead>
<tr>
<td>
<span ng-show="screen=='CALLREPORT' || screen=='PAV'" class="s1icon s1icon-m s1icon-s-case-log-a-call"></span>
</td>
<td style="text-align:left; padding-left:10px;">
<h3 ng-show="screen=='CALLREPORT'" >New Call Report</h3>
<h3 ng-show="screen=='PAV'" >Planned Agency Visits</h3>
<h3 ng-show="screen=='NEWCONTACT'" >Create New Contact</h3>
</td>
</tr>
<tr>
<td colspan="2">
<h4>{{callReport.Agency__r.Name}}</h4>
<p style="font-size:8pt;">{{callReport.Agency__r.Owner_Master__c}} <span ng-bind-html="bullet"></span> {{callReport.Agency__r.Sub_Stat__c}} (sub) <span ng-bind-html="bullet"></span> {{callReport.Agency__r.BillingCity}}</p>
</td>
</tr>
</table>
</div> <!-- end of page header -->
<div ng-show="CallReportDetailTabActive" ng-click="handleCallReportDetailTabClick($event)" >
<form name="callreportForm" id="callreportFormId" class="form-horizontal" novalidate="true" role="form" >
<div class="card-list">
<div class="card"> <!-- new card -->
<div class="card-heading">Date of Call<sup>*</sup></div>
<ul class="card-detail ">
<li>
<input type="text" class="sf1inputdate" datepicker-popup="MM/dd/yyyy" readonly="readonly"
ng-model="callReport.Date_of_Call__c" is-open="calendaropened"
datepicker-options="calendarOptions" ng-required="true" />
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Agency Interaction Type<sup>*</sup></div>
<ul class="card-detail ">
<li>
<select class="sf1select"
ng-model="callReport.Agency_Touch_Point__c"
ng-options="t.value as t.name for t in agencytouchpoints" ng-required="true"/>
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Discussion Points</div>
<ul class="card-detail ">
<li>
<select id="discussionPointsSelect"
class="sf1selectmultiple" multiple="multiple"
ng-model="callReport.Discussion_Points__c"
ng-options="d.value as d.name for d in discussPointLst" />
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Report Focus</div>
<ul class="card-detail ">
<li>
<select class="sf1select"
id="reportFocusSelect"
ng-model="callReport.Report_Focus__c"
ng-change="changeDiscussionPointPicklist()"
ng-options="f.value as f.name for f in focusoptions" />
</li>
</ul>
</div> <!-- end card -->
<div class="card"> <!-- new card -->
<div class="card-heading">Related Notifications</div>
<ul class="card-detail ">
<li>
<select id="relatedAlertsSelect"
class="sf1selectmultiple" multiple="multiple"
ng-model="callReport.Related_Notifications__c"
ng-options="d.value as d.name for d in myNotificationForAgencyPickList" />
</li>
</ul>
</div> <!-- end card -->
<!--New picklist fields that I added is below-->
<div class="card"> <!-- new card -->
<div class="row">
<div class="col-xs-6">
<div class="card-heading">Time Spent at Agency Visit/Call<sup>*</sup></div>
<ul class="card-detail ">
<li>
<select class="sf1select"
id="reportFocusSelect"
ng-model="callReport.Duration_of_Visit_Call_mins__c"
ng-change="changeDiscussionPointPicklist()"
ng-options="t.value as t.name for t in timeoptions" ng-required="true"/>
</li>
</ul>
</div>
<div class="col-xs-6">
<div class="card-heading">Time Spent in Transit to Agency</div>
<ul class="card-detail ">
<li>
<select class="sf1select"
id="reportFocusSelect"
ng-model="callReport.Transit_to_Agency__c"
ng-change="changeDiscussionPointPicklist()"
ng-options="t.value as t.name for t in transitoptions"/>
</li>
</ul>
</div>
</div>
</div> <!-- end card -->
I am trying to create a drop down menu from a JSon record and changing a price tag on selection of a option from it.If there is only record then drop down options are coming properly and price also getting changed on change of drop-down option
but if there are more records in JSon all select options showing the last JSon record value in drop down.Also changing a drop-down option changing all record's price tag .
Please suggest how I can separate the options based on JSon and each record's price tag should change based on change of its related select option .
Find my current code below.
<!DOCTYPE html >
<html ng-app="autoSuggestPOC">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
var searchApp = angular.module('autoSuggestPOC', ['ui.bootstrap']);
searchApp.controller('packageController', function($scope){
$scope.listPackage=[{"packageRoomTypeWithPriceList":[{"roomTypeName":"General","packagePriceVOList":[{"packagePriceId":1383,"price":"18000"}]},{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]},{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]}]},{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]}];
$scope.updateRoomandPrice = function (roomTypeWithPrice) {
console.log(roomTypeWithPrice+'=========>');
$scope.rooms = roomTypeWithPrice;
$scope.thePrice = $scope.rooms[0].packagePriceVOList[0].price;
$scope.theRoomType = $scope.rooms[0].roomTypeName;
};
$scope.updatePrice = function (price,roomType) {
$scope.thePrice = price;
$scope.theRoomType = roomType;
};
});
</script>
</head>
<body>
<div ng-controller="packageController">
<div ng-repeat="package in listPackage">
<table class="table">
<tr>
<td style="width:35%;">
<h3 ng-init='updateRoomandPrice(package.packageRoomTypeWithPriceList)'>{{thePrice}}</h3>
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-default" dropdown-toggle ng-disabled="disabled">
{{theRoomType}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="room in rooms">
{{room.roomTypeName}}
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Thanks
There are several ways you can achieve this. With a directive, using a controller per ng repeat. I do suggest to study angular more.
Here's the code that may help a little. I'm passing the package, you can also pass the index (using $index) and locate it in your updatePrice function.
<!DOCTYPE html >
<html ng-app="autoSuggestPOC">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script>
var searchApp = angular.module('autoSuggestPOC', ['ui.bootstrap']);
searchApp.controller('packageController', function($scope){
$scope.listPackage=[{"packageRoomTypeWithPriceList":
[{"roomTypeName":"General","packagePriceVOList": [{"packagePriceId":1383,"price":"18000"}]},
{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},
{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]}
,{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]}]},{"packageRoomTypeWithPriceList":[{"roomTypeName":"Sharing","packagePriceVOList":[{"packagePriceId":1384,"price":"22500"}]},{"roomTypeName":"Private","packagePriceVOList":[{"packagePriceId":1385,"price":"27000"}]}]}];
$scope.updateRoomandPrice = function (roomTypeWithPrice) {
console.log(roomTypeWithPrice+'=========>');
$scope.rooms = roomTypeWithPrice;
$scope.thePrice = $scope.rooms[0].packagePriceVOList[0].price;
$scope.theRoomType = $scope.rooms[0].roomTypeName;
};
$scope.updatePrice = function (package, price,roomType) {
package.thePrice = price;
package.theRoomType = roomType;
};
});
</script>
</head>
<body>
<div ng-controller="packageController">
<div ng-repeat="package in listPackage">
<table class="table">
<tr>
<td style="width:35%;">
<h3 ng-init='updateRoomandPrice(package.packageRoomTypeWithPriceList.roomTypeName)'>
{{package.thePrice}}</h3>
<div class="btn-group" dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-default" dropdown-toggle ng-disabled="disabled">
{{package.theRoomType}} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem" ng-repeat="room in package.packageRoomTypeWithPriceList">
{{room.roomTypeName}}
</li>
</ul>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
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.