I am listing div using ng-repeat to in following manner and include form-template which is assigned. I have several form-template and want to include in following manner. They can have nested ng-repeat to include same template. So i am using "trackerWidgetData" variable in my template. its working fine but inner ng-repeat have different variable(dependWidgetData).
How to use common model value for form-template. If we are including it in nested ng-repeat.
<div class="listview-trckr-new clearfix" ng-repeat="trackerWidgetData in optionsList.inlineTemplates | filter:options.trackerSearchClient track by $index">
<div class="listview-trckr-new-top">
<div class="listview-trckr-new-left clearfix">
<h3>{{trackerWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="trackerWidgetData.template" ng-include src="'/public/views/tracker-templates/'+trackerWidgetData.template"></div>
</div>
</div>
<div class="listview-trckr-new-btm" ng-if="trackerWidgetData.dependendTrackers && trackerWidgetData.dependendTrackers.length">
<div class="listview-trckr-new-top" ng-repeat="dependWidgetData in trackerWidgetData.dependendTrackers">
<div class="listview-trckr-new-left clearfix">
<h3>{{dependWidgetData.trackerName}}</h3>
</div>
<div class="listview-trckr-new-right">
<div ng-if="dependWidgetData.template" ng-include src="'/public/views/tracker-templates/'+dependWidgetData.template"></div>
</div>
</div>
</div>
</div>
I have many different type template like this.
<script type="text/ng-template" id="addManualContent.tpl">
<ng-form name="stepAddForm" novalidate >
<div class="new-weight-tracker">
<div class="weight-auto-fil-input">
<input type="text" name="value" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].value" />
<div class="new-trkr-select">
<select class="weight-selectbox" name="foodUnit" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.values[0].unitId" ng-options="opt.id as opt.unitName for opt in trackerWidgetData.unitType.units">
</select>
</div>
</div>
<div class="new-tracker-cale">
<adm-dtp ng-model='form[trackerWidgetData.uniqueFormId].trackerValue.dateTime' maxdate="{{optionsList.maxTimeStamp}}" options='{format: toUpperString(dateFormat) + "hh:mm", default: todayTimestamp, freezeInput:false}'>
<input name="date" ng-model="form[trackerWidgetData.uniqueFormId].trackerValue.dateTime" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" type="text" ng-required="true" dtp-input>
<i aria-hidden="true" class="fa fa-calendar" ng-click="initDTP(form[trackerWidgetData.uniqueFormId].trackerValue.dateTime)" dtp-toggle></i>
</adm-dtp>
</div>
<div class="new-logit-btn">
<a ng-href="" ng-class="{'disable-anchor-btn': optionsList.inAddProcess}" ng-click="optionsList.inAddProcess ? null : addTrackerValue(stepAddForm, trackerWidgetData)" class="fill_button">Log It</a>
</div>
</div>
</ng-form>
</script>
The Question is How to pass model value to ng-template when including it?
Related
I have two input forms, Date To and Date From that I want to repeat using ng-repeat. Right now, it's a block oh HTML text and I'm not sure what's the most efficient way of doing this except concatinating all the div elements the js side with the plus symbol.
ex. '<div class="container"> + bla bla + ...'
<div class="modal-body">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[0].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
</div>
The goal of my application is that a user chooses how many bookings he will store in his array in the first modal. Then he clicks a button, and the above html text will appear in the second modal. Based on the number of bookings the user chooses (let's say 3), the html above will repeat 3 times in a modal (there will be 3 Date From/Date To forms in a vertical list).
Any suggestions would be appreciated!
It is simple to use ng-repeat just go through the documentation here.
I see that in your question you are appending divs like:
htmlString ='<div id="1">Bla</div>'+'<div id="2">Bla</div>';
ngRepeat directive will be used on the HTML itself. Like this:
arrayOfItems = [1,2,3]; //in your controller
<!-- in your html -->
<div ng-repeat="item in arrayOfItems" id="{{item}}">
Bla
</div>
First Modals HTML
Number of bookings:
<input type="text" ng-model="numberOfBooking" name="numberOfBooking" />
<button type="button" ng-click="confirmNumberOfBooking()">Confirm Booking</button>
First Modal Controller
$scope.numberOfBooking = 1;
$scope.newResource.bookings = [
{
fromDateAndTime: "datetime",
toDateAndTime: "datetime"
}
];
$scope.confirmNumberOfBooking = confirmNumberOfBooking;
function confirmNumberOfBooking(){
for(var i = 0; i < $scope.numberOfBooking; i++){
$scope.newResource.bookings.push({fromDateAndTime: "datetime",toDateAndTime: "datetime"});
}
}
Second Modal HTML
<div ng-repeat="booking in newResource.bookings track by $index">
<!--Time From-->
<div class="row">
<div class="col-md-3 date-and-time-from" >
<label>Date/Time From</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng model="newResource.booking[$index].startDateTime" placeholder="From"></ms-date-time-picker>
</span>
</div>
</div>
</div>
<!--Time To-->
<div class="row">
<div class="col-md-3 date-and-time-to" >
<label>Date/Time To</label>
</div>
<div class="col-md-9">
<div class="form-group">
<span class="date-field">
<ms-date-time-picker ng-model="newResource.booking[$index].endDateTime" placeholder="To" ></ms-date-time-picker>
</span>
</div>
</div>
</div>
In one of my angularjs pages, I am using ngMessages module for form validation. While loading that page I am getting folowing error in console.
"angular.js:9400TypeError: d.setClass is not a function
at render (angular-messages.js:413)"
No idea why. Any help would be appreciated.
here is the HTML
<div class="extranet-content">
<div class="container-list">
<form name="personalForm" ng-submit="personalForm.$valid && saveUsers()" novalidate>
<div class="list-header" ng-show="all_users.length > 0">
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-1">
<h3>
Id
</h3>
</div>
<div class="col-xs-3">
<h3>
Name
</h3>
</div>
<div class="col-xs-3">
Login
</div>
<div class="col-xs-2">
Sign
</div>
<div class="col-xs-2">
password
</div>
<div class="col-xs-12">
<div class="border"></div>
</div>
</div>
</div>
<div class="list-content" ng-class="{ 'noHeader' : !all_users.length }">
<div class="row" ng-show="saveErrors.length > 0" ng-repeat="error in saveErrors track by $index">
<div class="col-xs-12">
</div>
<div class="col-xs-12"></div>
</div>
<div class="row clearfix"
ng-repeat-start="user in all_users = (users | filter: searchUser) | orderBy : predicate:reverse track by $index"
ng-class="{ 'marginTop' : $first}">
<div class="col-xs-1">
</div>
<div class="col-xs-1"></div>
<div class="col-xs-3">
</div>
<div class="col-xs-3">
<input type="text" name="txtLogin" id="txtLogin_{{$index}}" ng-model="user.Login">
</div>
<div class="col-xs-2">
<ng-form name="signForm">
<input maxlength="7" type="text" name="txtSign" id="txtSign_{{$index}}" ng-model="user.Sign"
required>
<span ng-messages="listFormSubmitted && signForm.txtSign.$error" role="alert" class="error">
<span ng-message="required">required</span>
</span>
</ng-form>
</div>
<div class="col-xs-2"></div>
</div>
<div class="row group" ng-repeat-end>
<div class="col-xs-12" ng-if="!$last">
<div class="borderBottom"></div>
</div>
</div>
</div>
</form>
</div>
</div>
I'va just started learning Angular and can't manage an issue with ng-repeat.
I want to display every letter from input in a single span element. I tried many ways but nothing works.
Here's my code on codepen
Is this what you're looking for ?
Each letter will be printed in different span.
solution of Error: ngRepeat:dupes
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
});
.center-block {
float: none;
}
input {
margin: 20px;
}
span:hover {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{ letter }} </span>
</div>
<br/><br/> If you want to split the word by line <br/><br/>
<div ng-repeat="letter in word.split(' ') track by $index">
<span> {{ letter }} </span>
</div>
</div>
</div>
You need to reference the alias Letter as opposed to Word
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{letter }} </span>
</div>
</div>
</div>
EDIT
Apparently what is happening is word.split('') is not allowing any duplicates.
"thisisatest".split('') if this is input into the console, it splits you expect it to. I dont understand why word.split('') is removing duplicates. Type a string with unique chars into your codepen and it will display correctly.
EDIT
per p2. answer the track by $index tracks all duplicates. which fixes the issue. The split is resulting in duplicate items in an array and without track by $index angular is just not displaying the duplicates
You should also be using track by $index with ng-repeat to deal with Duplicate Key in Repeater
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="col-sm-10 center-block text-center">
<input type="text" class="form-control" placeholder="Type to search..." ng-model="word" />
<div ng-repeat="letter in word.split('') track by $index">
<span> {{letter }} </span>
</div>
</div>
</div>
I have code like this:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-click="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-click="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>
When I click checkbox "processed", it works fine (changeProcessedStatus function is called). But when I click checkbox "paid", since the record is defined to be filtered, changePaidStatus function is not called.(I don't know why) when I remove ng-repeat filter, changePaidStatus function is called normally.
How can I solve this problem? Thanks.
The order of execution of ng-click and ng-model is ambiguous. Instead you should use ng-change to ensure that you obtain the correct values of the model variable:
<div class="row"
ng-repeat="x in orders|orderBy:'order_id'| filter:{ paid: '0' } ">
<div class="col left">
<INPUT TYPE="CHECKBOX" NAME="processed" id="processed"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.processed"
ng-change="changeProcessedStatus(x.id, x.processed)">上菜/未上菜
<P>
</div>
<div class="col left">
<INPUT TYPE=CHECKBOX NAME="paid" id="paid"
ng-true-value="'1'"
ng-false-value="'0'"
ng-model="x.paid"
ng-change="changePaidStatus(x.id, x.paid)">付款/未付款
<P>
</div>
</div>
In AngularJS, how do I get the selected option from a select element to put it somewhere else on the page?
<div class="modal-body">
<form class="">
<div class="control-group">
<label class="control-label" for="role">Choose a Playlist</label>
<div class="controls">
<select name="playlist">
<option ng-repeat="playlist in playlists | orderBy: 'playlist'" value="{{playlist.id}}">{{ playlist.name }}</option>
</select>
</div>
</div>
<p>
Or,
<a class="branded" href="#">Create New Playlist</a>
</p>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-branded" ng-click="postSongToPlaylist();">Save</button>
</div>
I want to get the option the user selects in the select element and put it as the parameter for the ng-click. How do I get Angular to "know" which option is the right one?
The value will be stored in the scope as the name you give to ng-model for the select tag.
<div class="modal-body">
<form class="">
<div class="control-group">
<label class="control-label" for="role">Choose a Playlist</label>
<div class="controls">
<select name="playlist" ng-model="playlist" ng-options="playlist.id as playlist.name for playlist in playlists | orderBy: 'playlist'">
</select>
</div>
</div>
<p>
Or,
<a class="branded" href="#">Create New Playlist</a>
</p>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-branded" ng-click="postSongToPlaylist(playlist);">Save</button>
</div>
I would also suggest that you use ng-options instead of ng-repeat to populate your option tags.