How to use ng-bind in realtime after appending an object
I want to be able to add a new element and use the ng-bind property to change the value of the new element.
I've tried multiple things, please see the code below for the best I've been able to come up with.
$(document).ready(function() {
$("#create-input").click(function() {
var newInput = document.createElement("p");
var code = document.createElement("span");
code.innerHTML = "{{input2}}";
newInput.innerHTML = "<p>{input2}: <input type='text' ng-model='name2'> {{name2}}</p>";
$("#target-container").append(newInput);
$("#main-container").append(code);
});
});
When I add text the newly appended input, the appended {{name2}} value does not change. I do not understand why I am unable to change {{name2}} via the text input box after appending.
Use the ng-repeat directive to add input elements to the DOM:
angular.module("app",[])
.controller("ctrl",function($scope) {
$scope.arr=[
{name: "name1", value: ""}
];
$scope.addInput = function() {
$scope.arr.push( {
name: "name" + ($scope.arr.length+1),
value: ""
})
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl" >
<div ng-repeat="elem in arr">
{{elem.name}}:
<input ng-model="elem.value">
</div>
<button ng-click="addInput()">Add Input</button>
<div>{{arr}}</div>
</body>
Related
This is my HTML structure in Ionic project.
<div ng-model="pollPage.test.username">updated content</div>
{{pollPage.test.username}}
Controller:
vm.test = {
username : 'static',
}
When I use check my page, its getting 'static' text however it should be 'updated content'
Whats the problem? I guess everything is right but its not working.
Thanks.
Your code is wrong it shoulbe like this:
<div ng-controller="yourController as vm">
<input type="text" ng-model="vm.pollPage.test.username">
<div>{{pollPage.test.username}}</div>
</div>
You cant asign ng-model to a div it must be on elements I/0 like inputs, dropdowns, checks, etc.
Controller:
var vm = this;
vm.pollPage = {};
vm.pollPate.test = {
username : 'static',
}
ng-model should be on an element that its content changes like: input, select, textarea...etc
Whenever I click on view the items are selected on same page. I need to display them on the new page, but I am not able to do that.
<html ng-app="countryApp">
<body ng-controller="CountryCtrl">
<div ng-repeat="x in models track by $index">
<button ng-click="select(x, $index)">View Me</button>
</div>
Selected Model:
<p> {{selected.name}} </p>
<p> {{selected.brand}} </p>
<p> {{selected.price}} </p>
<p> {{selected.quan}} </p>
<p> {{selected.sku}} </p>
</body>
Function:
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope){
$scope.select = function(brand) {
$scope.selected = brand;
}
$scope.models = [
{ brand: "Brand: Apple", id: 980190962, name: "Name: iPhone 5", price: "Price: $199", quan: "Quantity: 1", sku: "SKU:1234" },
{ brand: "Brand: Samsung", id: 298486374, name: "Name: Galaxy S3", price: "Price: $199", quan: "Quantity: 2", sku: "SKU:5678"}
]
});
</script>
</html>
You can use two options either store that selected user to localstorage or somewhere and read that in details view like
localStorage.setItem('myObj',JSON.stringify(brand));
and retrieve that in details view like
JSON.parse(localStorage.getItem('myObj'));
OR
I will prefare to use parent child relationship in this suppose you have a parent controller named 'CountryCtrl' and two child controllers 'CountryListCtrl' and 'CountryDetailCtrl'. List page is bind to 'CountryListCtrl' and details view is bind to 'CountryDetailCtrl' and on top you have 'CountryCtrl'. You can change your view using ng-include etc. When moving from List to Detail Controller set an object on parent controller and it will be accessible to both Controllers. You can learn about parent and child relationship in angularjs on internet there are tons of article available.
Thanks.
To show the details of the selected item in a new tab, there are multiple ways to achieve this. One way is to add a form with attribute target="_blank" (to open the action attribute in a new tab) and submit it in the select() function.
So you can add a form, like this:
<form id="openNewTabForm" target="_blank" method="GET"></form>
Then update the function to submit the form. There are multiple ways to pass the data about the selected phone - e.g. store the data in form fields, serialize the data and store it in a cookie, in localStorage, etc. Here is an example using hidden form fields:
$scope.select = function(phone) {
var form = document.getElementById('openNewTabForm');
form.action = action="selectedPhone.html";
Object.keys(phone).forEach(function(field,index) {
var input = form.elements[field]; //look for an existing form field for this field
if (input) { //update existing form field
input.value = phone[field];
}
else { //create a new form field for this
input = document.createElement('input');
input.type = 'hidden';
input.name = field;
input.value = phone[field];
form.appendChild(input);
}
});
form.submit();
$scope.selected = phone;
}
Then have a new page (e.g. selectedPhone.html) that takes the values submitted with the form. This could be a server-side page (e.g. with PHP, Ruby, etc), in which case you would set the attribute method="POST" on the form. Or you can just use a regular HTML page and process the query string. You could also use AngularJS + UI Router, VueJS, etc. to modify the URL after it has been loaded.
Take a look at this Plunker example I made for an example. I would have included a code snippet that would run here but SO doesn't (currently) allow having a form submission open a new tab because it is sand-boxed.
Another approach might be to use window.open() for opening a new browser window but that might lead to issues with popup blockers for some users.
You can open new modal on click of button function like following -
In controller:
$scope.showDetails = function(){
// open new html modal to show new screen using following
$ionicModal.fromTemplateUrl('templates/views/details.html',{
scope: $scope,
animation: 'none',
backdropClickToClose: false
}).then(function(modal){
$scope.modal= modal;
$scope.modal.show();
});
}
In HTML:
<div ng-repeat="x in models track by $index">
<button ng-click="showDetails (x, $index)">View Me</button>
</div>
By using new modal (screen) you can design as you required as well.
I am pretty new to AngularJS. I am working on a project wherein I need to append certain html select tags based on a button click. Each select tag is bound to a ng-model attribute (which is hardcoded). Now the problem I am facing is, once I append more than 2 such html templates and make changes in a select tag then value selected is reflected across all the tags bound to the corresponding ng-model attribute (which is pretty obvious). I would like to know if there is a way around it without naming each ng-model differently.
JS code:
EsConnector.directive("placeholderid", function($compile, $rootScope, queryService, chartOptions){
return {
restrict : 'A',
scope : true,
link : function($scope, element, attrs){
$scope.current_mount1 = "iscsi";
$scope.current_dedupe1 = "on";
$scope.y_axis_param1 = "Total iops";
var totalIops =[];
var totalBandwidth =[];
element.bind("click", function(){
$scope.count++;
$scope.placeholdervalue = "placeholder12"+$scope.count;
var compiledHTML = $compile('<span class="static" id='+$scope.placeholdervalue+'>choose mount type<select ng-bind="current_mount1" ng-options="o as o for o in mount_type"></select>choose dedupe<select ng-model="current_dedupe1" ng-options="o as o for o in dedupe"></select>choose y axis param<select ng-model="y_axis_param1" ng-options="o as o for o in y_axis_param_options"></select></span><div id='+$scope.count+' style=width:1400px;height:300px></div>')($scope);
$("#space-for-buttons").append(compiledHTML);
$scope.$apply();
$(".static").children().each(function() {
$(this).on("change", function(){
var id = $(this).closest("span").attr("id");
var chartId = id.slice(-1);
queryService.testing($scope.current_mount1, $scope.current_dedupe1, function(response){
var watever = response.hits.hits;
dataToBePlot = chartOptions.calcParams(watever, totalIops, totalBandwidth, $scope.y_axis_param1);
chartOptions.creatingGraph(dataToBePlot, $scope.y_axis_param1, chartId);
});
});
});
});
}
}
});
Code explanation:
This is just the directive which I am posting.I am appending my compiledHTML and doing $scope.apply to set the select tags to their default values. Whenever any of the select tags are changed I am doing a set of operations (function calls to services) on the values selected.
As you can see the ng-model attribute being attached is the same. So when one select tag is changed the value is reflected on all the appended HTML even though the data displayed does not match to it.
Hope this PLunker is useful for you. You need to have one way binding over such attributes
<p>Hello {{name}}!</p>
<input ng-model="name"/>
<br>Single way binding: {{::name}}
Let me know if I misunderstood your question
It is a bit hard to understand your whole requirement from your description and your code, correct me if I'm wrong: you are trying to dynamically add a dropdown on a button click and then trying to keep track on each of them.
If you are giving the same ng-model for each generated items, then they are bound to the same object, and their behavior is synchronized, that is how angular works.
What you can do is, change your structure to an array, and then assigning ng-model to the elements, so you can conveniently keep track on each of them. I understand you came from jquery base on your code, so let me show you the angular way of doing things.
angular.module('test', []).controller('Test', Test);
function Test($scope) {
$scope.itemArray = [
{ id: 1, selected: "op1" },
{ id: 2, selected: "op2" }
];
$scope.optionList = [
{ name: "Option 1", value: "op1" },
{ name: "Option 2", value: "op2" },
{ name: "Option 3", value: "op3" }
]
$scope.addItem = function() {
var newItem = { id: $scope.itemArray.length + 1, selected: "" };
$scope.itemArray.push(newItem);
}
$scope.changeItem = function(item) {
alert("changed item " + item.id + " to " + item.selected);
}
}
select {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<div ng-app='test' ng-controller='Test'>
<button type='button' ng-click='addItem()'>Add</button>
<select ng-repeat='item in itemArray'
ng-options='option.value as option.name for option in optionList'
ng-model='item.selected'
ng-change='changeItem(item)'></select>
</div>
I'm using RivetsJS to create a dynamic list which will be editable via an input box, and use the two-way data binding to update the element...
The list code is:
<ul id="todo">
<li rv-each-todo="list.todos">
<input type="checkbox" rv-idx="todo.idx" rv-checked="todo.done">
<span>{ todo.summary }</span>
</li>
<ul>
And the RivetsJS binding:
<script type="text/javascript">
var list = {
"todos": [
{"idx":133, "done":1,"summary":"Eat"},
{"idx":25, "done":0,"summary":"Code"},
{"idx":33, "done":1,"summary":"Sleep"},
{"idx":24, "done":0,"summary":"Repeat"}
]
}
rivets.bind($('#todo'), {list: list})
</script>
Now I want to create an element which can edit the items in the list in real time.. something like
<input rv-editing-idx="133"></input>
So that when I change the input data, element 133 on the list would change.. if I change the rv-editing-idx="133" attribute on the input, then another element would be edited..
Any ideas on how I can acheive that?
I hope you figured it out by yourself, if not, here's a possible solution: https://jsfiddle.net/nohvtLhs/1/
You can bind the input element, with the selected element from the array.
How you select the element of the array its up to you, i used in the example some radio input elements. After that, you have a simple binding, like you do it usually.
HTML:
<ul id="todo">
<li rv-each-todo="list.todos">
<input type="radio" rv-idx="todo.idx" rv-checked="todo.done" name="todo" rv-on-change="list.change">
<span>{ todo.summary }</span>
</li>
<ul>
<input id="changeele" rv-value="summary"></input>
JS:
var ele = document.getElementById('changeele');
var eleBinding = rivets.bind(ele, {});
var list = {
"todos": [
{"idx":133, "done":true,"summary":"Eat"},
{"idx":25, "done":false,"summary":"Code"},
{"idx":33, "done":false,"summary":"Sleep"},
{"idx":24, "done":false,"summary":"Repeat"}
],
"change": function(event, scope) {
eleBinding.unbind();
eleBinding = rivets.bind(ele, scope.list.todos[scope.index]);
}
}
rivets.bind(document.getElementById('todo'), {list: list})
I want to do something like this
<input type="checkbox" ng-model="first" ng-click="chkSelect()"/><label>First</label>
<input type="checkbox" ng-model="second" ng-click="chkSelect()"/><label>Second</label>
<input type="checkbox" ng-model="third" ng-click="chkSelect()"/><label>Third</label>
<input type="checkbox" ng-model="forth" ng-click="chkSelect()"/><label>Forth</label>
<button>Selected</button>
On button click I want to display selected checkbox labelname.
$scope.chkSelect = function (value) {
console.log(value);
};
Because the checkboxes are mapped, you can reference $scope.first, $scope.second, etc in your chkSelect() function. It's also possible to have a set of checkboxes mapped as a single array of data instead of having to give each checkbox a name. This is handy if you are generating the checkboxes, perhaps from a set of data.
I agree with Bublebee Mans solution. You've left out a lot of detail on why you're trying to get the label. In any case if you REALLY want to get it you can do this:
$scope.chkSelect = function (value) {
for(var key in $scope){
var inputs = document.querySelectorAll("input[ng-model='" + key + "']");
if(inputs.length){
var selectedInput = inputs[0];
var label = selectedInput.nextSibling;
console.log(label.innerHTML);
}
};
};
You can mess around with it to see if it's indeed selected.
fiddle: http://jsfiddle.net/pzz6s/
Side note, for anybody who knows angular please forgive me.
If you are dealing with server data, you might need isolated html block and deal with data in controller only.
You can do it by creating array in controller, maybe your data from response, and use ngRepeat directive to deal independently in html code.
Here is what I am telling you:
HTML:
<form ng-controller="MyCtrl">
<label ng-repeat="name in names" for="{{name}}">
{{name}}
<input type="checkbox"
ng-model="my[name]"
id="{{name}}"
name="favorite" />
</label>
<div>You chose <label ng-repeat="(key, value) in my">
<span ng-show="value == true">{{key}}<span>
</label>
</div>
</form>
Javascript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.names = ['pizza', 'unicorns', 'robots'];
$scope.my = { };
}
You want to have something like the following in your controller (untested, working from memory):
$scope.checkBoxModels = [ { name: 'first', checked: false }, { name: 'second', checked: false }, { name: 'third', checked: false }, { name: 'fourth', checked: false } ];
Then in your view:
<input ng-repeat"checkboxModel in CheckBoxModels" ng-model="checkBoxModel.checked" ng-click="chkSelect(checkBoxModel)" /><label>{{checkBoxModel.name}}</label>
Then update your function:
$scope.chkSelect = function (checkBoxModel) {
console.log(checkBoxModel.name);
};