I have a unique situation. I have a dropdown called caseStatus (see code below) and it is actually being written out during an ng-repeat, but it is tied to a model that contains the list of Case Statuses. Obviously there are multiple of these dropdowns on the page once it is rendered. All of that works just fine. The issue is that the judge can change the status of the case. I am working on a function that will handle that and I am confident it will work. My question is how to do the following two things (which are perhaps both solved with one method I suspect):
Make sure that each dropdown maintains its last value when a page is refreshed or returned to.
Make sure that it loads to what was last there during the ng-repeat. There is a field in the model that the ng-repeat is using that has the value for the Case Status.
Here is the code. There is a comment that says which dropdown is in question:
<div ng-controller="CaseListCtrl">
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
>>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-change="getCalendar();">
<option ng-repeat="department in departments">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div>
<div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases | orderBy: ['sequence', 'AmPm', 'Sched_Time', 'Case_Number']">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
<!-- Add hidden field to hold the CalendarID value for updating the sequence later-->
<input type="hidden" name="CalendarID_{{case.Case_Number}}" value="{{case.CalendarID}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case_Number}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
<select class="form-control" id="caseStatus" name="caseStatus" ng-model="caseStatus.statusID" ng-change="setStatus();" ng-options="castStatus.statusName for caseStatus in castStatus track by caseStatus.statusName" required></select><!-- This is the dropdown in question-->
{{case.Case_Title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.Sched_Time}} {{case.AmPm}}</div>
<div class="hearing-title">{{case.Event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
</div>
How do I accomplish this?
Are you developing a SPA (single page application)? What do you mean by "page is refreshed or returned to"? If you are reloading the whole page, then there is no way to retrieve the last values, as the controllers will reinitialize. You'll have to save the values somewhere, e.g. database or cookie, and retrieve them from a service that is injected into your controller...
Related
this is my first question here, I'm really desperate and I hope you can help me.
I'm trying to build a post/comment/reply system like Facebook by using vuejs, I'm using v-for to loop all posts/comments/replies after I use Axios to fetch data in my database (using laravel API), the problem here that I have input with v-model attached to a form inside my v-for loops when I type in my of my input it appears in all other inputs that has been looped here is an image for better understanding -> duplicate input,
<div class="panel panel-white post panel-shadow" v-for="(post) in posts" >
<div class="post-heading">
<div class="pull-left image">
<img src="https://bootdey.com/img/Content/user_1.jpg" class="img-circle avatar" alt="user profile image">
</div>
<div class="pull-left meta">
<div class="title h5">
<b>{{post.user.name}} </b>
made a post.
</div>
<h6 class="text-muted time">(number) minute ago</h6>
</div>
</div>
<div class="post-description">
<p>{{post.content}}</p>
<div class="stats">
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-thumbs-up icon"></i>2
</a>
<a href="#" class="btn btn-default stat-item">
<i class="fa fa-share icon"></i>12
</a>
</div>
</div>
<div class="post-footer">
<form>
<div class="input-group">
<input type="text" name="comment" class="form-control" v-model.lazy="comments.comment" :class="{ 'is-invalid': comments.errors.has('comment') }" required="required" autocomplete="off">
<has-error :form="comments" field="comment"></has-error>
<span class="input-group-addon">
<button type="submit" class="fa fa-send form-control" #click.prevent="addComment(post.id)" >Send</button>
</span>
</div>
</form>
<ul class="comments-list" v-for="(comment) in post.comments?post.comments:''">
<li class="comment" >
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_1.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{comment.user?comment.user.name:"-"}}</h4>
<h5 class="time">(number) minutes ago</h5>
</div>
<p>{{comment.comment}}</p>
<form>
<div class="input-group">
<input type="text" name="reply" class="form-control" v-model="replies.reply" :class="{ 'is-invalid': replies.errors.has('reply') }" required="required" autocomplete="off">
<has-error :form="replies" field="reply"></has-error>
<span class="input-group-addon">
<button type="submit" class="fa fa-send form-control" #click.prevent="addReply(comment.id)" >Send</button>
</span>
</div>
</form>
</div>
<ul class="comments-list" v-for="reply in comment.reply?comment.reply:''">
<li class="comment">
<a class="pull-left" href="#">
<img class="avatar" src="https://bootdey.com/img/Content/user_3.jpg" alt="avatar">
</a>
<div class="comment-body">
<div class="comment-heading">
<h4 class="user">{{reply.user.name}}</h4>
<h5 class="time">(number) minutes ago</h5>
</div>
<p>{{reply.reply}}</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
the easy way is put every post, comment and reply in separate components remember that's components for, to have separate states(or data) that you can easily manipulate it this way you write not only hard too extends but also its unreadable.
but the only way too bind a state in loop the way i said you can try with computed
v-model="replies[index].reply"
to:
v-model="replyComputed(index)"
Your problem is that replies.reply is the same for every looped comment. You should bind the reply to the specific comment you currently are iterating over e.g. v-model="comment.reply".
I want to print JSON file in HTML page but I don't know the keys and the values my JSON Object.
When I know the form of JSON I use this code:
<div ng-repeat="f in faq">
<div class="list-group-item clearfix">
<h4>
<span class="glyphicon glyphicon-file">
</span>
{{f.key}}-{{f.value}}
<span class="pull-right">
<button class="btn btn-warning" ng-click="">
<span class="glyphicon glyphicon-trash">
</span>
</button>
</span>
</h4>
</div>
</div>
</div>
But in this moment I don't know the keys and the values of the JSON.
Thanks for your help.
Looks like you are using angular(I noticed from ng-repeat). You can use (key,data) as follows:-
<div ng-repeat="(key, data) in faq">
{{key}} - {{data}}
</div>
In my application I've got different views which use the same piece of code. So, I put this piece of code in a file called sharedFile, all the variables and function have the same name, I checked twice.
This piece of code enables the display of a filter-box where the user can pick some filters, apply them and then the different filters applied are displayed. Everything works weel, HTTP request and so on, the only concern is that I have a "clear" button which enables to delete all the filters in one shot but actually when I click on it, filters are not in the URL anymore (that is what I want) but they are still displayed.
I share this file between 2 HTML files, and actually one works perfectly but the other one doesn't work only when the previous page visited was the first that works...
Any ideas or suggestions?
Thanks !
I put my code in case it can help :)
<!-- Enables the user to choose which filter he wants to be applied -->
<div ng-show=" show.filterBox" >
<div>
<strong>QUEUES</strong>
</div>
<span ng-repeat='queue in queues'>
<button href="" class="btn btn-sm marginButton btn-default" ng-click="onAddQueueFilter(queue.id.toString())" ng-hide="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-record"></span>
</button>
<button href="" class="btn btn-sm marginButton btn-primary text-muted" ng-click="onRemoveQueueFilter(queue.id.toString(), true)" ng-show="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-ok"></span>
</button>
</span>
<div>
<strong>TICKET TYPES</strong>
</div>
<span ng-repeat='type in types'>
<button href="" class="btn btn-sm marginButton btn-default" ng-click="onAddTypeFilter(type.id.toString())" ng-hide="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-record"></span>
</button>
<button href="" class="btn btn-sm marginButton btn-primary text-muted" ng-click="onRemoveTypeFilter(type.id.toString(), true)" ng-show="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-ok"></span>
</button>
</span>
<div>
<button class="btn btn-sm btn-success" ng-click="applyFilterBox()">Apply</button> - <a href='' ng-click='openCloseFilterBox()'>cancel</a>
</div>
<div ng-show="!show.filterBox ">
<div ng-show="routeParams.queue_id">
<!-- indicate that the list is queue list when status and queue list are shown -->
<span ng-show="routeParams.type_id" class="text-muted">queue:</span>
<span class="label label-primary label-status-id small-margin-top" ng-repeat="queue in queues" ng-show="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-remove"
style='font-size:0.7em; cursor:pointer'
ng-click='onRemoveQueueFilter(queue.id.toString(), false)'/>
</span>
<span ng-hide="!routeParams.queue_id" class='small-margin-top'>
-
clear
</span>
</div>
<div ng-show="routeParams.type_id">
<span ng-show="routeParams.queue_id" class="text-muted">type:</span>
<span class="label label-info label-status-id small-margin-top" ng-repeat="type in types" ng-show="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-remove"
style='font-size:0.7em; cursor:pointer'
ng-click='onRemoveTypeFilter(type.id.toString(), false)'/>
</span>
<span ng-hide="!routeParams.type_id" class='small-margin-top'>
-
clear
</span>
</div>
I have a drop down that is populated witht eh following code:
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" selectpicker ng-model="department" ng-controller="CaseListCtrl" ng-change="getCalendar();">
<option ng-repeat="department in departments track by $index">{{department.CourtRoom}}</option>
</select>
I then have this in my controller:
JBenchApp.controller('CaseListCtrl', ['$scope', '$http',
function ($scope, $http) {
// Case list stuff here
$scope.getCalendar = function () {
var e = document.getElementById("deptSelect");
var department = e.options[e.selectedIndex].text;
console.log(department);
$http.get('http://10.34.34.46/BenchViewServices/api/Calendar/LA/' + department + '/08-27-2015').success(function (response) {
$scope.cases = response;
});
}
$http.get('http://10.34.34.46/BenchViewServices/api/CourtDept/LA').success(function (response) {
$scope.departments = response;
});
}]);
The $scope.cases updates with new data, but the partial doesn't change to match that. What can I do to make the partial view refresh?
EDIT TO ADD PARTIAL VIEW CODE:
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
>>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker ng-model="department" ng-controller="CaseListCtrl" ng-change="getCalendar();">
<option ng-repeat="department in departments track by $index">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div ng-controller="CaseListCtrl">
<div class="col-sm-8 col-sm-offset-2 caselist" ng-repeat-start="case in cases track by $index">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case_Number}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
{{case.Case_Title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.Sched_Time}} {{case.AmPm}}</div>
<div class="hearing-title">{{case.Event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
Try tracking the cases by their id or remove track by from the ng-repeat.
ng-repeat not update model with track by
UPDATE:
I think the issue is that your are using ng-controller twice within your html causing a second scope to be created. Wrap your html in a container div and apply the ng-controller attribute to that only.
I am playing with Fuel UX pillbox component and I want to make it part of a form I have to submit. Unfortunately, the control does not contain any form element to submit which makes it cool but useless (for me). I added a Input::Hidden element in the HTML code but now I have to force the pillbox component to work with the form element which I am not sure how to do.
<div class="form-group">
<label for="{name}" class="col-sm-4 control-label text-right">Tags</label>
<div class="col-sm-8">
<div class="pillbox" data-initialize="pillbox" id="pillbox-{name}">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
<input type="hidden" name="{name}" id="{name}" value="">
</div>
</div>
What I really need is to use JavaScript to update the Input::Hidden element when a new tag is added or removed from the list.
Oh, JavaScript is not my forte.
The Fuel UX component has event for add and remove new tag the probably has to be used but as I mentioned - not sure how to implement it.
If you have any suggestions, please help, or if you have any other suggestions on how to implement the Pillbox component with a HTML form - I am opened to new ideas.
Thanks.
You could use the Pillbox events to capture the pillbox data via the items method.
HTML:
<div class="pillbox" id="myPillbox1">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<a class="pillbox-more">and <span class="pillbox-more-count"></span> more...</a>
<input type="text" class="form-control dropdown-toggle pillbox-add-item" placeholder="add item">
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input id="pillboxInput" type="text" value="">
Javascript:
$('#myPillbox1').on('added.fu.pillbox edited.fu.pillbox removed.fu.pillbox', function pillboxChanged() {
$('#pillboxInput').val( JSON.stringify( $('#myPillbox1').pillbox('items') ) );
});
This example outputs into a JSON object structure, since the pillbox control supports text and value attributes (and more with data attributes) for each pill.