I'm fairly new using AngularJS but I've been using for a pet project and I've run in to an issue. What I basically want to do is take the text input from this input field:
<form id="ci_search_form">
<p class="input-append"><label>Search:</label> <input type="text" id="query" ng:model="query" autofocus> <button ng:click="clearSearch()" class="btn"><i class="icon-remove"></i></button></p>
</form>
and update this input field's value with that value:
<div><input type="text" id="ciquery" ng:model="ciquery.Name"></div>
The second input filters some data and I can type in that directly and it works. However this page will have different sets of data, each with their own search input that I want updated by the master input at the top. I can't set value="" or use jQuery to set the value either, it just appears blank unless I explicitly type in that second input field. Can anyone assist with a solution?
EDIT
I thought I should include my app and controller code:
var App = angular.module('TicketAssistApp', []);
App.controller('SearchController', function($scope, $http, $filter){
$scope.query = '';
$http.get('static/ci_list.json').success(function(data){
$scope.ci_list = data;
});
$scope.clearSearch = function(){
$scope.query = '';
}
});
EDIT 2
Made some progress. Created a function that can be called an update ciquery in $scope:
var App = angular.module('TicketAssistApp', []);
App.controller('SearchController', function($scope, $http, $filter){
$scope.query = '';
$scope.ciquery = '';
$http.get('static/ci_list.json').success(function(data){
$scope.ci_list = data;
});
$scope.queryUpdate = function(){
$scope.ciquery = $scope.query;
}
$scope.clearSearch = function(){
$scope.query = '';
$scope.queryUpdate();
}
});
This works great. However, this creates another issue. Before in ciquery I was using ciquery.Name to filter only on the Name attribute. With this new solution I had to change it to this:
<div><input type="hidden" id="ciquery" ng:model="ciquery"></div>
This searches all fields in my data which returns unwanted results. Suggestions?
$scope and ng-model are differents. You should give ng-model's property to ng-click's function. Looks at this -> Ng-model does not update controller value
To update second input's field (here an example -> http://jsfiddle.net/yEvSL/1/)
<div><input type="text" id="ciquery" ng:model="query"></div>
Related
Please look at the following Plunkr: http://plnkr.co/edit/hwVL3xtnD9hGJLpULDjI?p=preview
When you click the checkbox the first time the model doesn't update.
Why does this happens?
var app = angular.module('main', ['ngMaterial'])
.controller('DemoCtrl', function($scope, $filter, $http) {
$scope.propdata = [];
$scope.success ="loading..";
var url = "api.json";
$http({url:url,
method:"GET"
}).then(function (rs){
$scope.propdata = rs.data[0];
$scope.success ="done..";
});
});
You json is returning has a 1 value, not a true or false. If you change your data to true or false, it will recognize the initial value. Another option is to cast the "1" to boolean, and then assign it.
Edit:
Another option is to set the ng-true-value and ng-false-value on your checkbox, so it recognizes the 0 and 1 values you are using. Notice the simple quotes after the double ones "'1'" to recognize the string. Example here:
HTML
<div class="checkbox {{font_size}}">
<label for="garden_service">
<input type="checkbox" id="garden_service"
ng-checked="propdata.garden_service==1" ng-true-value="'1'" ng-false-value="'0'"
ng-model="propdata.garden_service">Garden Service <br/>model value:{{propdata.garden_service}}
</label>
</div>
http://plnkr.co/edit/t280UjC3NYNtQt28W1wm?p=preview
Official docs link: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D
I am creating one form using Bootstrap & AngularJS. I am using CK editor in my page as textarea. But I am not able to retrieve the value of the textarea while the value of the input text field is easily captured in my AngularJS controller. Following is the code snippet:
HTML page:
<div class="container">
<div ng-controller="controller">
<form role="form">
<label for="sd"><b>Short Description: </b></label>
<input ng-model="sdesc" class = "form-control input-xxlarge" type = "text" placeholder ="Provide a short description here."/>
<br/>
<label for="dt"><b>Details: </b></label>
<textarea ng-model="details" class="form-control" name="details_editor" id="details_editor"></textarea>
<br/>
<button class = "btn btn-primary" ng-click="submitted()">Ask It!</button>
<script>
CKEDITOR.replace('details_editor');
</script>
</form>
</div>
<br/>
<hr>
</div>
JS
app.controller('controller', ['$scope', function($scope){
$scope.submitted = function(){
var sdesc = $scope.sdesc;
var details = $scope.details;
alert($scope.details);
};
}]);
The alert shows undefined for the text area value.
Please help me solve the issue.
You are using the plain Javascript version of CK editor and hence Angular is not getting notified to update the ng-model value of that textarea.
Basically, Angular runs a digest cycle to update all views and models but since in this case the values being changed in the CK editor is happening outside the Angular.s context which is not updating the ng-model value.
To fix this, we added a small directive and notifying the change in the ng-model to the Angular by using the $timeout. (We can also use the $apply directive, but it may fail sometimes if the digest cycle is already in progress)
Example directive:
var app = angular.module("your-app-name", []);
app.directive("ckEditor", ["$timeout", function($timeout) {
return {
require: '?ngModel',
link: function ($scope, element, attr, ngModelCtrl) {
var editor = CKEDITOR.replace(element[0]);
console.log(element[0], editor);
editor.on("change", function() {
$timeout(function() {
ngModelCtrl.$setViewValue(editor.getData());
});
});
ngModelCtrl.$render = function (value) {
editor.setData(ngModelCtrl.$modelValue);
};
}
};
}]);
Remove, your following code:
<script>
CKEDITOR.replace('details_editor');
</script>
And, modify your text-editor like:
<textarea ng-model="details" class="form-control" ck-editor name="details_editor" id="details_editor"></textarea>
I found ng-ckeditor to implement ckeditor in angularjs.
Please refer this :https://github.com/esvit/ng-ckeditor. I tried it, It is easy to implement and working as expected
I want to prevent the user from deleting certain length of string from textbox in AngularJS.
I want some text like "abcd" to be fixed in textbox such that user cannot delete it. It would act like pre-string.
For that I have initialized the textbox with ng-init and on keyup event I'm checking the length of string, if it is less than predefined size then I'm putting the string back in the ng-model.
It's working with no errors, but not smoothly. I want to prevent pressing backspace or delete button if the text reached to specified length while deleting the text from textbox.
I am new to AngularJS.
Here is the Plunker link.
HTML
<body ng-app="myApp1">
<div ng-controller="myController">
<div ng-app>
<label>Key:</label>
<input type="text" name="key" ng-model="key" ng-init="key = 'abcd'" ng-keyup="updateKey($event)">
</div>
</div>
</body>
AngularJS
(function(angular) {
'use strict';
var myApp = angular.module('myApp1', []);
myApp.controller('myController', ['$scope', function($scope) {
$scope.updateKey = function($event) {
var len = $scope.key.length;
if ($event.keyCode === 8 && len < 4) {
$scope.key = "abcd";
}
};
}]);
})(window.angular);
I think you can setup a explicit $watcher function for the $scope.key
$scope.$watch('key', function(newValue, oldValue) {
console.log(oldValue, newValue);
if(newValue.length < 4) {
$scope.key = 'abcd';
}
});
watcher function will call every time when the model is change, so when you change the model angular will call this function, in the function we can get the old value and new value based on that you can do what you try to achive.
here is the DEMO
I have an <input> box that acts as a search bar:
<input type="text" class="form-control input-lg" placeholder="Filter" ng-init="initSearch()" ng-model="search" ng-change="updateSearch()" id="search_bar">
and has the following accompanying angular code:
$scope.initSearch = function(){
var searchParam = parseQueryString()["searchParam"];
console.log(searchParam);
if (searchParam !== undefined){
var element = angular.element(document.querySelector('#search_bar'))[0];
console.log(element);
element.value = searchParam;
}
};
$scope.updateSearch = function(){
$location.search('searchParam',document.getElementById('search_bar').value);
};
The user has to be able to enter an URL with the searchParam already set and the page has to load the appropriate data. Once I change the value of the input box how would I get it to actually reflect that input in the data it displays? It only seems to update when the search parameter is entered into it manually. I've also tried changing the value without jQLite and just used document.getElementById etc
rather than look at the dom, why don't you use the actual model for your function like so:
<input
type="text"
class="form-control input-lg"
placeholder="Filter"
ng-init="initSearch(search)"
ng-model="search"
ng-change="updateSearch(search)"
id="search_bar">
Edit:
Expanding on my initial answer, you read the Angular $location params when the page loads. I think you were a little confused about ng-init; this directive just gives you a handy place to bind some data or run some function -- it doesn't specifically affect the model on this element. So just read the location in your controller and bind it to your model, and also have the model bind those changes to the location like so:
<div ng-controller="SearchCtrl as vm">
<input type="text"
class="form-control input-lg"
placeholder="Filter"
ng-model="vm.search"
ng-change="updateSearch(search)"
id="search_bar">
</div>
js:
var app = angular.module('myApp', []);
app.controller('SearchCtrl', function($location) {
vm.search = $location.search().searchParam;
vm.updateSearch = function() {
$location.search('searchParam', vm.search);
};
});
I ended up solving this by creating a custom directive that used ngModel directly alongside $setViewValue. Here is my directive.
app.directive('initSearch', function(){
return {
require: "?ngModel",
link: function(scope, element, attrs, ngModel){
var parseQueryString = function(){
var str = window.location.search;
var objURL = {};
str.replace(
new RegExp("([^?=&]+)(=([^&]*))?", "g" ),
function($0,$1,$2,$3){
objURL[$1] = $3;
}
);
return objURL;
};
var searchParam = parseQueryString()["searchParam"];
var searchBar = document.getElementById("searcher");
if(searchParam!==undefined && searchBar.value ===''){
ngModel.$setViewValue(searchParam);
searchBar.value = searchParam;
}
scope.onChange = function(){
ngModel.$setViewValue(scope.value);
}
}
};
});
I am hoping to get an input value inside a keyup function that can runs from multiple inputs. Every time there is a keyup the function will trigger according to the specific input. So, I am trying to use $this inside the function. No succes so far..
HTML code:
<input ng-keyup="getRxcui()" placeholder="Type med a" id="medicineA" />
<input ng-keyup="getRxcui()" placeholder="Type med b" id="medicineB" />
Angular code:
var rxConflicts = angular.module('rxConflicts', []);
rxConflicts.controller('MainController', function($scope, $http){
$scope.getRxcui = function(event){
// getting the value for each medicine input
var medValue = $(this).value;
console.log(medValue);
}
});
I am pretty sure $(this) is the right way to do this so that I don't need to duplicate that function for each input and use ng-model... You can take my word that the angular works fine.
Any help is appreciated. Thanks
use ng-model and pass it in function:
<input ng-keyup="getRxcui(medicineA)" ng-model="medicineA" placeholder="Type med a" id="medicineA" />
<input ng-keyup="getRxcui(medicineB)" ng-model="medicineB" placeholder="Type med b" id="medicineB" />
Angular code:
var rxConflicts = angular.module('rxConflicts', []);
rxConflicts.controller('MainController', function($scope, $http){
$scope.getRxcui = function(value){
// getting the value for each medicine input
var medValue = value;
console.log(medValue);
}
});
Angular 2 and superior:
You could pass the $event on the keyUp and use it to get the target (the input) and it's value. In case you're using formControls and not binding directly through ngModel
Template HTML:
<input (keyup)="getRxcui($event)">
Component.ts
getRxcui(event){
var inputValue = event.target.value;
console.log(inputValue);
}