We Keep Coding

Some input boxes are not cleared on the second click Angularjs

Dears, I made a javascript function when checkbox is checked to enable some controllers and when unchecked disable the same controllers and clear their data, it works fine in the first click only, which means if I check the checkbox and select data, then unchecked the checkbox it clear data from input boxes and hide the datetimepicker. BUT if check the checkbox for the second time and select data, then unchecked the checkbox, it does not clear data but hide the time picker.
HTML
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 margin-bottom-10 padding-none">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<div class="form-check margin-top-30">
<label>
<input ng-model="attend" type="checkbox" name="check" ng-change="checkattendance()"> <span class="label-text">Attendance Time</span>
</label>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="form-group">
<div class="col-xs-12">
<label class="control-label" for="name">Operator<span class="danger">*</span></label>
</div>
<div class="col-xs-12">
<select ng-disabled="!attend" ng-show="lang==0" class="form-control input-sm" ng-model="opinname" ng-options="o.opid as o.openm for o in Operator"></select>
<select ng-disabled="!attend" ng-show="lang==1" class="form-control input-sm" ng-model="opinname" ng-options="o.opid as o.opanm for o in Operator"></select>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<div class="col-xs-12">
<label class="control-label" for="name">From <span class="danger">*</span></label>
</div>
<div class="col-xs-12 date">
<div id="timeform1" class="input-append date">
<input data-format="hh:mm:ss" type="text" class="form-control" ng-disabled="!attend" ng-model="from2">
<span class="add-on" >
<i data-time-icon="icon-time"id="icon1" data-date-icon="icon-calendar" ng-show="attend">
</i>
</span>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
<div class="form-group">
<div class="col-xs-12">
<label class="control-label" for="name">To <span class="danger">*</span></label>
</div>
<div class="col-xs-12 date">
<div id="timeto1" class="input-append date">
<input data-format="hh:mm:ss" type="text" class="form-control" ng-disabled="!attend" ng-model="to2">
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar" ng-show="attend">
</i>
</span>
</div>
</div>
</div>
</div>
Angular js
$scope.checkattendance = function () {
if ($scope.attend == true) {
$('#timeform1').datetimepicker({
pickTime: true, pickDate: false
});
$('#timeto1').datetimepicker({
pickTime: true, pickDate: false
});
}
else {
$scope.opinname = '';
$scope.from2 = '';
$scope.to2 = '';
$scope.apply();
}
}
why ng-model=from2 and ng-model=to2 are not binded and clear the data
any help , thanks in advance

One problem is that your current checkattendance function is not changing the attend boolean, it needs to toggle the state from true to false or false to true each time the checkbox is changed, one easy modification is to modify the function and add $scope.attend =!$scope.attend; either at the start or the end of the function. Something like below:
$scope.checkattendance = function () {
$scope.attend =!$scope.attend;
if ($scope.attend == true) {
$('#timeform1').datetimepicker({
pickTime: true, pickDate: false
});
$('#timeto1').datetimepicker({
pickTime: true, pickDate: false
});
}
else {
$scope.opinname = '';
$scope.from2 = '';
$scope.to2 = '';
$scope.apply();
}
}
You should also tie the checkbox's selected state to that boolean something like checked=attend

AngularJS - add a checkbox to a widget

How do I add a checkbox to a widget in AngularJS?
I have a widget displayed on one of my webpages- the widget currently displays a couple of alarms whenever the alarms are raised (i.e. it's watching the value of a couple of variables- when those variables reach a certain value, the alarms are raised, and displayed on the widget).
What I want to do now, is add a checkbox to the widget, to toggle whether or not the alarms should be displayed on the widget. The HTML for the widget is:
<div data-ng-if="widget.name === 'umw-tag-box'">
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Tag:"></label>
<div class="col-sm-8">
<tags-input max-tags="1"
min-length="1"
key-property="tag"
display-property="tag"
template="tagItem.html"
um-max-tags-strict="true"
data-ng-model="widget.tag"
placeholder="Start typing a tag name"
replace-spaces-with-dashes="false"
on-tag-adding="onAddingTagItem($tag)"
on-tag-added="warning.tag = undefined"
um-tags-input-warning="{{warning.tag}}"
data-ng-class="{'hide-tags-input': widget.tag.length > 0}">
<auto-complete min-length="1"
load-on-focus="true"
load-on-empty="true"
display-property="tag"
template="autocomplete.html"
source="autocompleteTagsFilter($query)">
</auto-complete>
</tags-input>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background color:"></label>
<div class="col-sm-8">
<um-color-picker color="widget.color"></um-color-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Background icon:"></label>
<div class="col-sm-8 ">
<um-icon-picker icon="widget.icon"></um-icon-picker>
</div>
</div>
</div>
<div class="divider"></div>
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Flip:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ng-model="widget.flip">
<span></span>
</label>
</div>
</div>
<div class="divider"></div>
<div class="row" ul-scroll-modal-to-me="focusDesc">
<div class="form-horizontal">
<label class="col-sm-4 control-label-left" data-i18n="Description:"></label>
<div class="col-sm-8">
<input type="text" class="form-control input-sm" ng-model="widget.description"
data-ng-focus="focusDesc = true" data-ng-blur="focusDesc = false">
</div>
</div>
</div>
</div>
Inside the widget HTML, there is already what appears to be markup for a checkbox, though I can't actually see that on the page anywhere...
<div class="row ui-checkbox-row">
I tried adding a similar line inside the umw-tag-box div, and inside the divs a couple of levels below that, but couldn't get the checkbox to appear no matter where I placed it...
What is the best way to add a checkbox to the widget?
Edit
I tried adding a function inside the link function in the JS that would add/ display the checkbox on the page, but this doesn't seem to have made a difference to what's displayed in the browser:
.directive('umwTagBox', function($timeout, fxTag, umColorFilter){
return {
...
template: ...
...
link: function($scope, $element){
...
var setTagValue = function(tag){
...
//This is the code I added:
angular.module('showAlarmsCheckbox', [])
.controller('alarmsController', ['$scope', function($scope){
$scope.checkBoxMode1 = {
value1 : true,
value2 : 'YES'
};
}]);
...
};
...
}
}
})
Is there something I'm missing here/ something I'm doing wrong?

Searching the list in angular JS

I have one search box in one page i.e header.html file and the list on which i want to implement the search functionality is on another page i.e content.html. So how can i use angularjs search functionality in this case. Below is the html code.
header.html
<div class="input-group col-md-12 search-inner-page ">
<input type="text" class="form-control" placeholder="Search" name="q">
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
</div>
contentCtrl.js
angular.module("adminsuite").controller("surveyController",['getAllSurveyService','AuthenticationService', '$scope','$rootScope', '$state', function(getAllSurveyService,AuthenticationService, $scope,$rootScope,$state){
getAllSurveyService.surveyList().then(
function( data ) {
$scope.allSurveys = data;
console.log($scope.allSurveys);
if($scope.allSurveys.ErrorMessage){
AuthenticationService.ClearCredentials();
$state.go('login');
}
}
);
}]);
headerController.js
angular.module("adminsuite").controller("headerController",['AuthenticationService','$rootScope','$cookieStore','$scope',function(AuthenticationService,$cookieStore,$scope,$rootScope){
$scope.header = "Header";
$scope.searchInSurvey = $scope.surveySearch;
$scope.logout = function(){
//$scope.dataLoading = true;
AuthenticationService.ClearCredentials();
console.log($cookieStore.get('globals'));
//$state.go('login');
};
}]);
On typing something in the search box of header.html as mentioned above, it should search the content in content.html page.

You could maybe use a ng-change on the input of header.html to update the allSurveys array.
Just add a ng-change and a ng-model to your input
<div class="input-group col-md-12 search-inner-page ">
<input ng-model="yourCtrl.searchInput" ng-change="yourCtrl.searchInputChanged" type="text" class="form-control" placeholder="Search" name="q">
</div>
In your controller you can add a function searchInputChanged that will filter the data based on searchInput using .filter().

You can set your list of Surveys in a variable into a $rootScope, and get its value from another controller, like this:
//Controller that contains the list
$rootScope.surveysList = [s1,s2,s3,...,sn];
After that, you can get this variable and set into the controller scope where your input is.
$scope.allSurveys = $rootScope.surveysList;
Your input should be like this:
<input ng-model="surveySearch" type="text" class="form-control" placeholder="Search" name="q">
And que query in your list template should be like this:
ng-repeat="survey in allSurveys | filter:surveySearch"
I hope it works for you

Thank You guys. I got the answer like this...
header.html
<div class="input-group col-md-12 search-inner-page">
<input type="text" class="form-control" placeholder="Search" name="q" ng-model="global.search">
<img src = "images/search.png" alt = "Generic placeholder thumbnail" >
</div>
content.html
<div class="surveyList" ng-repeat="survey in allSurveys | filter:global.search">
<span class="checkbox" ></span>
<div class="toogleSurvey row" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
<div class="col-xs-5 col-sm-2 col-md-2">{{survey.Name}}</div>
<div class="col-xs-5 col-sm-1 col-md-1">{{survey.Type}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.SurveyReference}}</div>
<div class="col-sm-3 col-md-3 hidden-xs">{{survey.CreatedDate}}</div>
<div class="col-sm-2 col-md-2 hidden-xs SurveyLastChild">{{survey.Status}}</div>
<div class="hidden-xs surveyListTool" ng-show="hoverEdit">
<a class="editSurvey" title="edit"></a>
<a class="deleteSurvey" title="delete"></a>
<a class="exportSurvey" title="export survey"></a>
<a class="menuSurvey" title="menu"></a>
</div>
headerCtrl.js
$rootScope.global = {
search: ''
};

angular view template as partial in webform

In a .ASPX page with WebForm engine <%..%> syntax, I ng-included an Angular .html template as partial. The .ASPX has many server side controls such as <asp:DropDownList runat="server">. Since the input elements included in Angular template don't have RuntAt attribute, the values are not posted to the server. I could have angular script to update some hidden server side controls on the hosting .ASPX page, but that's not ideal since I want to keep the partial as generic as possible. How do I set them up so that the values in the select elements are posted back? Thanks.
WebForm (.ASPX)
<div class="row">
<div class="col-md-12 col-sm-12">
<%-- to be removed --%>
<div style="display:none">
<uc:FaciltyServiceRole ID="FSR" runat="server" ShowFacility="false" />
</div>
<%--*********** inject Angular app and partial ***********--%>
<div ng-app="ufsrAppModule">
<%--ng-include require "single quote 'some file' inside double quote"--%>
<div ng-include="'ngApps/fsrCascadeDropdown.html'"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<p>
<label for="<%:Scheduled_Date.ClientID %>">*Scheduled Date:</label>
</p>
</div>
<div class="col-md-3 col-sm-3">
<asp:TextBox ID="Scheduled_Date" runat="server" CssClass="Scheduled_Date form-control" Enabled="False"></asp:TextBox>
</div>
<div class="col-md-5 col-sm-5">
<asp:RequiredFieldValidator ID="valReqCallDate" ControlToValidate="Scheduled_Date" runat="server" ErrorMessage="Scheduled Date is required">*</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" ID="valRegExCallDate" ErrorMessage="Please enter a valid date" ValidationExpression="^(((0?[1-9]|1[012])/(0?[1-9]|1\d|2[0-8])|(0?[13456789]|1[012])/(29|30)|(0?[13578]|1[02])/31)/(19|[2-9]\d)\d{2}|0?2/29/((19|[2-9]\d)(0[48]|[2468][048]|[13579][26])|(([2468][048]|[3579][26])00)))$"
ControlToValidate="Scheduled_Date">*</asp:RegularExpressionValidator>
</div>
</div>
Angular Template Partial (.Html)
<div ng-controller="ufsrController as ufsrCtrl">
<div class="container" ng-disabled="ufsrCtrl.disableFSR == 'true'">
<div class="row">
<div class="widget-body">
<div class="col-md-6 col-sm-6">
<div class="row" ng-show="ufsrCtrl.showFacility">
<div class="col-md-4 col-sm-4">
<label class="form-label">Facility:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.facility" name="facility" ng-options="fac.FacilityID as fac.FacilityName for fac in ufsrCtrl.facilities" ng-disabled="(ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0)" ng-change="ufsrCtrl.facilityChanged()"
class="form-control"></select>
</div>
<div class="col-md-1 col-sm-1">
<i ng-show="ufsrCtrl.facilities === undefined || ufsrCtrl.facilities.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="row">
<input type="text" name="service" ng-model="ufsrCtrl.service.ServiceName" style="display:none" />
<div class="col-md-4 col-sm-4">
<label class="form-label">Service:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.service" name="serviceId" ng-options="item.ServiceName for item in ufsrCtrl.services track by item.ServiceID " ng-disabled="(ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0)" ng-change="ufsrCtrl.serviceChanged()"
class="form-control">
<option value="">-- Choose Service --</option>
</select>
</div>
<div class="col-md-1 col-sm-1">
<i ng-show="ufsrCtrl.services === undefined || ufsrCtrl.services.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
<div class="row">
<input type="text" name="role" ng-model="ufsrCtrl.role.RoleName" style="display:none" />
<div class="col-md-4 col-sm-4">
<label class="form-label">Role:</label>
</div>
<div class="col-md-6 col-sm-6">
<select ng-model="ufsrCtrl.role" name="roleId" ng-options="item.RoleName for item in ufsrCtrl.roles track by item.FacilityServiceRoleID" ng-disabled="(ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0)" ng-change="ufsrCtrl.roleChanged()" class="form-control">
<option value="">-- Choose Role --</option>
</select>
</div>
<div class="col-md-1 col-sm-1" title="select a Service to dismiss me">
<i ng-show="ufsrCtrl.roles === undefined || ufsrCtrl.roles.length <= 0" class="fa fa-refresh fa-spin"></i>
</div>
</div>
</div>
</div>
</div>

I eventually used javascript to find the angular dropdowns by their IDs, get their values and update some hidden inputs on post. It may not be elegant but worked.

Scoping issue when adding multiple instances of views using ng-repeat

I'm hitting a scoping issue when using the ng-repeat functionality of AngularJS.
please see the plnkr
I have an array of objects 'boxCollection' and a list of items 'itemCollection' which I display in a drop down.
$scope.boxCollection = [];
$scope.itemCollection =
[
{name: 'item1'},
{name: 'item2'},
{name: 'item3'}
];
Now I have my view as
<script type="text/ng-template" id="addBox.html">
<div class="box-controls">
<span class="glyphicon glyphicon-plus pull-left" ng-click="addBox()"></span>
<span class="glyphicon glyphicon-minus pull-left" ng-class="{disable_div:boxCollection.length < 2} " ng-click="removeBox($index)"></span>
</div>
<div class="box-container">
<div class="box-details">
<div class="boxItem">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-md-3">Item</label>
<div class="col-md-8">
<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item" ng-disabled="false">
<option value=""> None </option>
</select>
</div>
</div>
<div class=" form-group ">
<label class="control-label col-md-3">Item Desc</label>
<div class="col-md-8">
<input type="text " class="form-control " ng-model="boxCollection[$index].item.desc ">
</div>
</div>
</form>
</div>
</div>
<div class="clearfix "></div>
</div>
</script>
The view is wrapped in a script tag with an id and is called with an ng-repeat.
I have one function to add a box element into my view 'addBox()'. It generates one entry in 'boxCollection' array and another entry in 'boxTmplList' array. 'boxTmplList' is responsible for showing the views.
Now if you select let's say 'item1' from the drop down in box1 and add a value in the input field, add another box in the view using the '+' button and select 'item1' again in the another instance. It displays the value of input field 1 in the input field 2.
enter image description here
On further analysis I found that Angular tracks the objects with similar 'item' name using the same $hashkey.
I'm using a workaround by adding another property to the object 'boxCollection[$index].itemDesc' instead of 'boxCollection[$index].item.desc' and then later on modify the object using another function, but I feel that's not the most efficient way.
Any insight on this would be greatly appreciated.

You need to change ng-model="boxCollection[$index].item" to ng-model="boxCollection[$index].item.name" , like as-
<select class="form-control" ng-options="item.name for item in itemCollection" ng-model="boxCollection[$index].item.name" ng-disabled="false">

Working Plnkr
Change ng-model="boxCollection[$index].item.desc" to ng-model="itemCollection[$index].name".
<div class=" form-group ">
<label class="control-label col-md-3">Item Desc</label>
<div class="col-md-8">
<input type="text " class="form-control " ng-model="itemCollection[$index].name">
</div>
</div>