Develop Reference

How to show element when value in input doesn't found in a list in AngularJS?

I created search input to search some items inside a list. I want that if the item search isn't inside the list to show add button like in the html code:
<div ng-controller="foodCtrl">
<form>
<div class="form-group row foodGroupp" >
<label for="inputFood" class="col-sm-2 col-form-label">food</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food" ng-keyup="doCheck()">
</div>
<span id="addIcon" ng-show="showIcon">
<button class="btn btn-default">+</button>
</span>
<ul ng-show="inputFood" id="foodList">
<li ng-repeat="foodN in foodName | filter : inputFood">
<span>{{ foodN.name}}</span>
</li>
</ul>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">הוסף</button>
</div>
</div>
</form>
</div>
The javascript code look like this:
var app = angular.module('mainApp', []);
app.controller('foodCtrl',function($scope,$http){
$scope.foods = [];
$scope.foodName = [];
$http.get('/files/foodName.json')
.success(function(response){
$scope.foodName = response;
});
$scope.showIcon = false;
$scope.doCheck = function(){
$(function () {
if($scope.inputFood != ""){
var sizeOfList = $("#foodList").find("li").length;
if(sizeOfList == 0){
console.log("sizeOfList " +sizeOfList);
$scope.showIcon = true;
}
}else{
$scope.showIcon = false;
}
});
}
});
It doesn't work correctly. If the length of the value is one or the list is shown it still show me the icon.

You can direct show your button according to your filter data.
HTML CODE
<div ng-controller="foodCtrl">
<form>
<div class="form-group row foodGroupp" >
<label for="inputFood" class="col-sm-2 col-form-label">food</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food" ng-keyup="doCheck()">
</div>
<span id="addIcon" ng-hide="(foodName|filter:inputFood).length > 0">
<button class="btn btn-default">+</button>
</span>
<ul ng-show="inputFood" id="foodList">
<li ng-repeat="foodN in foodName | filter : inputFood">
<span>{{ foodN.name}}</span>
</li>
</ul>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">הוסף</button>
</div>
</div>
</form>
</div>

It works fine here at the code snippet.Nothing changed.
var app = angular.module('mainApp', []);
app.controller('foodCtrl', function($scope, $http) {
$scope.foods = [];
$scope.foodName = [];
//$http.get('/files/foodName.json')
// .success(function(response) {
// $scope.foodName = response;
// });
$scope.foodName = [{
name: 'test1'
}, {
name: 'test2'
}, {
name: 'test3'
}];
$scope.showIcon = false;
$scope.doCheck = function() {
if ($scope.inputFood != "") {
var sizeOfList = $("#foodList").find("li").length;
if (sizeOfList == 0) {
console.log("sizeOfList " + sizeOfList);
$scope.showIcon = true;
}
} else {
$scope.showIcon = false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="mainApp">
<div ng-controller="foodCtrl">
<form>
<div class="form-group row foodGroupp">
<label for="inputFood" class="col-sm-2 col-form-label">food</label>
<div class="col-sm-10">
<input type="atext" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food" ng-keyup="doCheck()">
</div>
<span id="addIcon" ng-show="showIcon">
<button class="btn btn-default">+</button>
</span>
<ul ng-show="inputFood" id="foodList">
<li ng-repeat="foodN in foodName | filter : inputFood">
<span>{{ foodN.name}}</span>
</li>
</ul>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-10">
<button type="submit" class="btn btn-primary">הוסף</button>
</div>
</div>
</form>
</div>
</div>

In HTML ng-value doesn't update according to the controller updated.bt at the same time expression is updated according to the controller

In HTML ng-value="itemdetails[0].Title" doesn't update according to the controller update.bt at the same time {{itemdetails[0].Title}} this expression is updated.I cannot understand what is the problem.
HTML
<div id="lineitemmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form>
<div class="form-group">
<label >Title</label>
<input type="text" ng-model="item.Title" class="form-control" ng-value="itemdetails[0].Title" placeholder="Title">
{{itemdetails[0].Title}}
</div>
<div class="form-group">
<label >SKU</label>
<input type="text" ng-model="item.SKU" class="form-control" ng-value="itemdetails[0].SKU" placeholder="SKU">
{{itemdetails[0].SKU}}
</div>
<div class="form-group">
<label >Description</label>
<input type="textarea" ng-model="item.Description" class="form-control" ng-value="itemdetails[0].Description" placeholder="Description">
</div>
<div class="form-group">
<label >Unit type</label>
<input type="text" ng-model="item.UnitType" class="form-control" ng-value="itemdetails[0].UnitType" placeholder="Unit type">
</div>
<div class="form-group">
<label >Unit price</label>
<input type="text" ng-model="item.Unitprice" class="form-control" ng-value="itemdetails[0].Unitprice" placeholder="Unit price">
</div>
<button type="submit" class="btn btn-success" style="margin-right: 75%" ng-click="saveitem(item)" data-dismiss="modal">Save</button>
<button type="submit" class="btn btn-danger" data-dismiss="modal">Delete</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Controller
app.angular.controller('lineItemController', function ($scope, rest, $window) {
$scope.lineitems = [];
$scope.itemdetails = [];
var currentitem;
$scope.addnewitem = function () {
$scope.lineitems.push({Title:'Title',SKU:'SKU',Description:'Description',UnitType:'Unit type',UnitPrice:'Unit price'});
};
$scope.getitems = function () {
rest.get('lineitem').then(function (results) {
$scope.lineitems = [];
$scope.itemdetails = [];
$scope.lineitems = results;
console.log(results);
});
};
$scope.getitems();
$scope.showitem = function (item) {
$scope.itemdetails.push(item);
console.log($scope.itemdetails);
$("#lineitemmodal").modal('show');
};
$scope.saveitem = function (newitem) {
console.log($scope.itemdetails[0]);
//item.ID = $scope.itemdetails.ID;
$scope.itemdetails[0].Title = newitem.Title;
$scope.itemdetails[0].SKU = newitem.SKU;
$scope.itemdetails[0].Description = newitem.Description;
$scope.itemdetails[0].UnitType = newitem.UnitType;
$scope.itemdetails[0].Unitprice = newitem.Unitprice;
rest.post('lineitem', {
LineItem: $scope.itemdetails[0]
}).then(function (results) {
console.log(results);
$scope.getitems();
});
};
});

Angularjs store date of daterangepicker into form variable

I'm switching my form validation from thymeleaf to angularjs and I have some problem with daterangepicker. For angular I read about datarangepicker for angular so I would like to use it to store startdate and enddate in my form field.
This is my HTML modal code:
<div class="modal" id="addLicenseModal" data-ng-app="myApp">
<div class="modal-dialog" id="addLicenseModaController" data-ng-controller="freeUserController">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">New license</h4>
</div>
<div class="modal-body">
<div data-ng-show='users.length > 0'>
<form novalidate class="simple-form" name="newLicenseForm">
<!-- form start -->
<div class="box-body">
<div class="form-group" id=existingUser>
<label>Username</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newLicense.username" required> <ui-select-match
placeholder="Select username">
{{$select.selected.username}}</ui-select-match> <ui-select-choices
repeat="user.username as user in (users | filter: $select.search) track by user.username">
<span data-ng-bind="user.username"></span> </ui-select-choices> </ui-select>
</div>
<div class="form-group">
<label>Date and time range</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
data-ng-model="newLicense.date" required/>
</div>
<div class="form-group">
<label>Execution number</label><span id="errmsg"
style="float: right; color: red"></span> <input
data-ng-model="newLicense.counter" id="executionNumber" type="number"
class="form-control" placeholder="executionNumber" min="0" required>
</div>
<div class="form-group">
<label>MAC address</label> <input id="macAddress" type="text"
class="form-control" data-ng-model="newLicense.macAddress" maxlength="25"
placeholder="MAC address" required>
</div>
<div class="form-group">
<label>CPU ID</label> <input id="cpuId" type="text"
class="form-control" data-ng-model="newLicense.cpuId" maxlength="25"
placeholder="CPU ID" required>
</div>
</div>
</form>
</div>
<p data-ng-show="users.length == 0">All clients have the own
license, you can update a license with UPDATE button.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-show='users.length > 0' data-ng-disabled="newLicenseForm.$invalid"
data-ng-click="createLicense(newLicense)" id="createLicenseButton"
type="button" class="btn btn-primary">Create license</button>
<button data-ng-show='users.length == 0' id="createLicenseButton"
type="button" class="btn btn-primary" disabled>Create
license</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
In javascript I have this code
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.datePicker.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
I receive exception Cannot set property 'date' of undefined on $scope.datePicker.date = {startDate: null, endDate: null};
row. Has someone used this plugin to store form information?Thanks

Your problem is in data-binding and specifically here:
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" data-ng-model="newLicense.date" required/>
because $scope.newLicense.date is never defined.
To solve this problem, this line of code:
$scope.datePicker.date = {startDate: null, endDate: null};
should be like :
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
also in your ajax post your data should be $scope.newLicense
so your controller should be like:
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : $scope.newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
this is a working demo

ng-click wont trigger, function not working. Could it be scope?

I am trying to get an animation to work, when you click the search button it should be pulled to the right in order to allow the user to type whatever they want to search for. However, the ng-click doesn't even seem to trigger. I have tried "alert('its working');" several times but nothing pops up. The code is below, any ideas of what the problem could be?
HTML:
<li class="pull-right">
<div>
<!-- ngIf: showNavbarSearch --><div ng-if="showNavbarSearch" class="mat-slide-right pull-right ng-scope">
<form class="search-form form-inline ng-valid pull-left ng-pristine" ng-show="showNavbarSearch" ng-submit="submitNavbarSearch()">
<div class="form-group">
<label class="sr-only" for="search-input">Search</label>
<input type="text" class="form-control" id="search-input" placeholder="Search" autofocus="">
</div>
</form>
</div><!-- end ngIf: showNavbarSearch -->
<div class="pull-right">
<button ng-click="toggleSearch()" class="btn btn-sm btn-link pull-left withoutripple">
<i class="md md-search f20"></i>
</button>
</div>
</li>
JS:
app.directive('navbarSearch', ['$timeout', function ($timeout) {
return {
restrict: 'A',
templateUrl: '/dist/assets/tpl/directives/navbar-search.html',
link: function($scope, element, attrs) {
$scope.showNavbarSearch = false;
$scope.toggleSearch = function () {
$scope.showNavbarSearch = !$scope.showNavbarSearch;
};
$scope.submitNavbarSearch = function(){
$scope.showNavbarSearch = false;
};
}
};
}]);

Does this help:
app.directive('navbarSearch', [ function () {
return {
restrict: 'A',
templateUrl: 'navbar-search.html',
controller: function($scope){
$scope.showNavbarSearch = false;
$scope.mySearch = "";
$scope.submitNavbarSearch = function(myVal){
$scope.mySearch = myVal;
console.log("submitting: " + $scope.mySearch);
$scope.showNavbarSearch = false;
}
$scope.toggleSearch = function(){
$scope.showNavbarSearch = !$scope.showNavbarSearch;
}
},
};
}]);
Template:
<li class="pull-right">
<div ng-if="showNavbarSearch" class="mat-slide-right pull-right ng-scope">
<form class="search-form form-inline ng-valid pull-left ng-pristine" ng-show="showNavbarSearch" ng-submit="submitNavbarSearch(mySearch)">
<div class="form-group">
<label class="sr-only" for="search-input">Search</label>
<input type="text" ng-model="mySearch" placeholder="Search" autofocus="">
</div>
</form>
</div><!-- end ngIf: showNavbarSearch -->
<br />
<div class="pull-right">
<button ng-click="toggleSearch()">
<i class="md md-search f20">Toggle search</i>
</button>
</div>
</li>
Usage:
<div navbar-search>
</div>

angular - hiding form

I have a <h4> that has an item Title, if you click on the title then it turns into a textbox with submit and cancel buttons. I have all that working , my problem is Trying to hide the form after the ajax reguest
html:
<div class="col-xs-12" ng-show="editThis">
<div class="col-xs-8">
<input type="text" class="form-control" ng-model="topic.TopicName" />
</div>
<div class="col-xs-2 pull-right">
<input type="button" class="btn-xs btn-success btn" ng-click="editDetails(topic)" value="submit" />
</div>
<div class="col-xs-2 pull-right">
<input type="button" class="btn btn-xs btn-danger" value="cancel" ng-click="editThis = false" />
</div>
see I use $scope.editThis to determine weather to show the or the
i do not know why this is not working.
$http.post("/MyVault/EditTopic", { topicEditId: item.VaultTopicId, topicEditName: item.TopicName, topicEditDescription: item.TopicDescription })
.then(function(data, status, headers, confis) {
$scope.editThis = false; // never gets reflected in view
});

Please see demo here http://jsbin.com/saduju/4/edit
JS:
var app = angular.module('app', []);
app.controller('firstCtrl', function ($scope, $http) {
$scope.topics = [
{TopicName: "First Topic" },
{TopicName: "Second Topic"},
{TopicName: "Third Topic"}
];
$scope.editDetails = function (topic) {
$http.post("/MyVault/EditTopic", {
topicEditName: topic.TopicName
})
//success calback
.then(function (data, status, headers, confis) {
})
//error calback
.then(function (error) {
})
//finally calback
.then(function () {
//--change editThis to topic.editThis
topic.editThis = false;
});
};
});
html:
<body ng-app="app">
<div ng-controller="firstCtrl">
<div ng-repeat="topic in topics" >
<!--change topic to topic.editThis-->
<h4 ng-click="topic.editThis=true">{{topic.TopicName}}</h4>
<!--change topic to topic.editThis-->
<div class="col-xs-12" ng-show="topic.editThis">
<div class="col-xs-8">
<input type="text" class="form-control" ng-model="topic.TopicName" />
</div>
<div class="col-xs-2 pull-right">
<input type="button" class="btn-xs btn-success btn" ng-click="editDetails(topic)" value="submit" />
</div>
<div class="col-xs-2 pull-right">
<input type="button" class="btn btn-xs btn-danger" value="cancel" ng-click="editThis = false" />
</div>
</div>
</div>
</body>