I have a div which displays the text. And below it have a textarea which can edit the text of the div.On typing the text of textarea the div text changes.I don't want this to happen.The problem is both div and text area is in ng-reapeat.Otherwise I would have used different scope for both.
<div ng-repeat="item in list">
<div>
{{item.text}} // this is the text that is changing when typing in text area
</div>
<div>
<textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}}
</textarea>
</div>
</div>
Here is the link to my issue
http://codepen.io/ankitappuria27/pen/pyVzaj
If you don't want to change the text in your div, just use a one time binding like:
{{::item.text}}
Note: Any change you make inside your textarea will ofcourse still affect your models text value. The changes just won't be visible in your div.
Example:
http://codepen.io/anon/pen/VaxGOp
Documentation:
https://docs.angularjs.org/guide/expression#one-time-binding
In your JS file you may add element in json for displaying header text just like below:
app.controller('ctrl', function($scope) {
$scope.newitem = '';
$scope.list = [
{
"order":1,
"header":"Black", // header text
"text":"Black"
},
{
"order":2,
"header":"Blue", // header text
"text":"Blue"
}
];
});
and your html for binding should be as below
<div>
{{item.header}}
</div>
<div>
<textarea rows="4" cols="50" class="form-control" ng-model="item.text" required>{{item.text}}
</textarea>
</div>
Related
I'm absolutely new to Angular.js, I got the file from someone to fix.
So the question is that I really want to change the div with clicking buttons, so I tried to search of it and i found the solution with radio button, but the thing is what i want to click is div.
So here is my code :
let vm = $scope
vm.isShown = function (color) {
return color === vm.color;
};
//this is the function in a controller
<div class="item">
<span class="group-name"
><p>PHASE 1.0</p>
Closed API Data Market</span
>
<input type="radio" ng-model="color" value="oneZero" /> 1.0
</div>
<div class="item">
<span class="group-name"
><p>PHASE 1.5</p>
Open API Data Market</span
>
<input
type="radio"
ng-model="color"
value="oneFive"
checked="checked"
/>
1.5<br />
</div>
</div>
</div>
<br />
<div class="servicePreparing" ng-show="isShown('oneZero')">
<img src="assets/img/serviceStop.jpg" />
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
I want to remove the inputs and want to click with div as class name as 'item'
You can see one example lives here: https://plnkr.co/edit/flMIhl6ugNUNXwpE
Also, what you have to do is set one variable (In the radio buttons were color), so in your AngularJS controller:
vm.color = '';
And set that value with ng-click in both divs, with the specific value, in your view you will have:
<div class="btn" ng-click="color = 'oneZero'">1.0</div>
<div class="btn" ng-click="color = 'oneFive'">1.5</div>
<div class="servicePreparing" ng-show="isShown('oneZero')">
One Zero Image Showed
</div>
<div class="select-list-area" ng-show="isShown('oneFive')">
One Five Image Showed
</div>
I have multiple set off field name and I want to display all those in single textbox using ng-model. But I am able to display only single field name.
This is my code : <p> {{cts.selectedcontact.location.state + " "cts.selectedcontact.location.postcode}} </p>
<input type="text" ng-model="cts.selectedcontact.location.state"+`"cts.selectedcontact.location.postcode"> <br/>`
try this
angular.module("app",[]).controller("appContr",function($scope)
{
$scope.newmodelName="";
$scope.Sample1="ram";
$scope.Sample2="esh";
$scope.Concstring=function(val1,val2)
{
return val1+val2;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="appContr">
<input type="text" ng-init="newModelName =Concstring(Sample1,Sample2)" ng-model="newModelName">
<br />
</div>
well ng-model shall have only one argument, that will be binded to the field value and it will receive the value of the input field every time it is changed. So you can not use several variables in one ng-model.
But if you would like to show it as a default value, then you can set it in the value argument in html, or just in your js file. like so:
<input type="text" ng-model="modelValue"> <br/>
and in .js file:
$scope.modelValue = $scope.cts.selectedcontact.location.state + $scope.cts.selectedcontact.location.postcode;
You can initialize new variable for text box like as
<div ng-init="newField = cts.selectedcontact.location.state + cts.selectedcontact.location.postcode">
<input type="text" ng-model="newField"> <br/>
</div>
I am appending a div into the DOM on user click. To get the user entered values I want to attach ng-model to input fields. As I don't know the total number of div's which user will append, I want to keep the values in ng-model dynamic.
Here is the code: (my-Controller)
function addDiv() {
var element = angular.element(document.createElement('my-Directive'));
var el = $compile(element)($scope);
//where to place the element
angular.element($('#add')).append(element);
$scope.insertHere = el;
//giving unique id to div element.
var objName = 'step'+number;
dataCtrl.tbt = {
"val": objName,
"tes":"arjun"
}
$(element).attr("id",objName);
console.log(objName);
number++;
};
//html where I want to put dynamic ng-model
<div class="form-group">
<div class="col-xs-4">
<label for="target">Target:</label>
</div>
<div class="col-xs-7">
<input id="target" placeholder="Target" ng-model="dataCtrl.tbt[dataCtrl.tbt.val]" type="text" class="form-control"/>
</div>
You can use ng-repeat to add input boxes dynamically
<div ng-repeat="in in input">
<label>{{$index+1}}</label><input type="text" ng-model="in.value">
</div>
<button ng-click="addInput()">Add</button>
And push an empty value to the Array on ng-click of add button
Plunker Link
Hope this Helps!!
Basically I have two Divs in a page out of which only one will be visible at a time.
I have a text input placed inside my first div which is shown my default.
Now if the first div is hidden and the second DIV is shown,
I want to swap the text input DOM in to the second DIV. The ID of the textinput and the value it has needs to be retined on swapping.
I have a reference of the text input to be swapped in my custom directive (ref-comp in the below snippet).
How can i achieve this in angularJS ? Please help me here.
<div id="1">
<div id ="container1">
<input type="text" id="text1">
</input>
</div>
<div id ="container1">
<ref-comp id="ref1" refId ="text1">
</ref-comp>
</div>
</div>
Please have a look on it this might be help.
var app = angular.module('myApp', []);
app.controller('IndexCtrl', function($scope) {
$scope.showme = true;
});
<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 id="1" data-ng-app="myApp" data-ng-controller="IndexCtrl">
<div id ="container1" ng-show="showme">
value of text filed of div 1: {{divAVarialbe.text1}} <br>
<input type="text" id="text1" ng-model="divAVarialbe.text1">
</input>
</div>
<div id ="container1" ng-show="!showme">
value of text filed of div 2 : {{divBVarialbe.text1}} <br>
<input type="text" id="text1" ng-model="divBVarialbe.text1">
<ref-comp id="ref1" refId ="text1">
</ref-comp>
</div>
<button ng-click="showme = !showme" ng-show="!showme">Show div 1</button>
<button ng-click="showme = !showme" ng-show="showme">Show div 2</button>
</div>
You can use ng-show to swap the div and and scope variables to access the input filed of the DOM.
suppose that if use to scope variable lets say divAVarialbe and divBVariable.
then for div A divAVarialbe will be use i.e all the child model will be go inside divAVarialbe so your data str will be
divAVarialbe={"text1":"value of textfild","otherModel":"",...}
same for Div B.
In this way you can differentiate the DOM.
It base on how much you have knowledge of Object.
assume it like mvc pattern then it will be easy to code.
might be this will help.
I have created a button, that when it is clicked I want to get the text from a textarea. Here is the html.
<div class="text-area-container">
<textarea id="chatBox" class="chat-box" rows="2"></textarea>
</div>
<div class="button-container btn-group btn-group-chat">
<input id="comment" ng-click="chat($event)" class="btn" value="Comment"/>
</div>
And here is my controller
$scope.chat = function($event) {
var button = $event.currentTarget;
};
I get the button from the $event, but how do I get the textarea. I know that I can jQuery it, but that is not the Angular way. How do i do it without jQuery?
Add ng-model to text area, like:
<textarea id="chatBox" class="chat-box" rows="2" ng-model="textModel"></textarea>
In controller write $scope.textModel = "";
Demo Fiddle
Angular is two way data binding. Setting ng-model will chain textarea value with controller var.
On controller side:
$scope.textArea = "";
On view side:
<textarea [...] ng-model="textArea">[...]</textarea>
On your controller, $scope.textArea will always contain textarea content.
You're looking for ng-model.
<textarea ng-model="text" id="chatBox" class="chat-box" rows="2"></textarea>
access it with $scope.text in js or {{text}} in view.
Well if you need to know only text area's value I guess it should be binded to some $scope model variable via data-ng-model="MyTextValue":
<textarea id="chatBox" data-ng-model="MyTextValue" class="chat-box" rows="2">}</textarea>
so in $scope.chat function you can get access to $scope.MyTextValue.
You can also enable/disable or show/hide control via ng-* attibutes too. In most cases it is enough.