I have a basic click to edit span field in my code, which prompts an input box and a couple of buttons:
<span ng-click="editField()" ng-if="edit === false">Your text to edit</span>
<div ng-if="edit === true">
<input type="text" ng-bind="data.field" value="Your text to edit" />
<button type="submit" class="btn btn-primary" ng-click="update(data.field, 'somename')"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-default" ng-click="cancelEdit()"><span class="glyphicon glyphicon-remove"></span></button>
</div>
When the user saves, the update function is called. However, the issue I'm having is that how do I send whatever text the user inputs, towards my angular logic, without settings the text values in an object at the start of the controller?
Heres an example:
http://jsfiddle.net/43GUa/1/
Basically it prints in the console: undefined + somename
How do I get that undefined to the text in the input field? I can't use ng-model since I'm unable to declare my object data(?) in my controller.
Cheers
ng-bind replaces the text of the element with the value, you want to use ng-model for two-way binding to the value of the control (fiddle):
<input type="text" ng-model="data.field"/>
Why don't you want to set the value at the start? If you want the value to come from the HTML you should write a directive. If you are doing this in more than one place you could write something to update a field or to call a function:
<my-editable update="data.field">Your text to edit</my-editable>
<!-- or -->
<my-editable update="updateValue($value, 'somename')">Your text to edit</my-editable>
If you really don't want to do that, you could pass $event to editField() and load data.field with the value then:
$scope.editField = function(event) {
$scope.edit = true;
$scope.data.field = event.target.innerText;
};
<span ng-click="editField($event)" ng-if="edit === false">Your text to edit</span>
Related
I am new to Angular js and I need to create a form where the input fields will be dynamically generated based on a loop and I need to send all the field's data to an API.
This is the string that I get from the backend
"Earth:planet,life,solar,global$##data_col.signal:gateway ox,gw ox,gateway all ox,all sig,,gw signal gain,gateway"
This is my part of the html below where I process the string
<div class="container-fluid synBox">
<span><b>Enter synonyms:</b></span>
<form enctype='application/json'>
<div class="form-group" name="syn" ng-repeat="n in message.expert_advice.split('$##')">
<span class="fonts" style="color:#487baa;"><b>{{n.split(":")[0]}}</b></span>
<input class="form-control" id="expert_advice_input" type="text" ng-model={{n.split(":")[1]}} placeholder="" name={{n.split(":")[0]}} value={{n.split(":")[1]}}>
</div>
<button type="submit" class="btn btn-primary center-block" ng-click="submit_synonyms()">Submit</button>
</form>
</div>
Here is my js for the function in onclick submit_synonyms()
$scope.submit_synonyms = function() {
var variable = document.getElementById('expert_advice_input').value;
console.log(variable)
}
Here is what it looks like in the UI
I was hoping that I would get the value for all input fields but when I click the button I only get the value of the first input field (as seen in the console).
planet,life,solar,global
I also followed other similar questions in stackoverflow like Ng-repeat submit form with generated fields but couldn't figure out how to apply it in my situtation. What am I doing wrong?
Do note that the number of input fields can be dynamic based on the string supplied to me.
ADDITIONAL INFO
Just for the sake of clarity, the reason I am doing the splits on the string is to get the heading and the remaining comma separated strings in the input fields to which a user can add more string and hit the submit button.
write the following in your controller
const param = <input> //"Earth:planet,life,solar,global$##data_col.signal:gateway ox,gw ox,gateway all ox,all sig,,gw signal gain,gateway";
$scope.param = param.split('$##').reduce((acc,val)=> {
const spl = val.split(':');
acc[spl[0]] = spl[1];
return acc;
},{});
and following in your template or html
<ul >
<li data-ng-repeat="(key,value) in param"><label for={{key}}>{{key}}</label><input type='text' value='{{value}}'</li>
</ul>
add styles and optimize code style.
Iam trying an auto search and on selecting a product., I need to redirect to the product URL associated to selected dropdown. Iam able to get all search results.
I have created datalist for all search list and created ng-click event on datalist to send the selected details to controller. But ng-click is not working in datalist. Can you help me out
for.eg. in (key,data) ., I need to show data in front end search box., but on selecting that data from datalist., I need to send its respective key to controller
problematic section for your reference (Full code in plunker):
<h2>Custom search field</h2>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input type="text" class="form-control input-lg" list="suggestions" placeholder="search" ng-model="obj.searchText" ng-focus="searchSuggest()" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button" ng-click="showProduct(obj)">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div>
<datalist id="suggestions">
<p ng-repeat="values in suggestionResults track by $index"><option ng-repeat="(key,data) in values" value="{{data}}" ng-model="selectedProduct" ng-click="showProduct({key: key, data: data})"></p>
</datalist>
</div>
Here in above code., u can see key and data. I need to just show Data value but on selecting one option., i need to send the respective URL link to conroller. Created datalist in ng-repeat
Please select a value from dropdown in textbox from plunker link below
*
I have updated plunker so that URL also can be seen in search
dropdown., I need to pass that URL to conroller in short. please help
me how to achieve it
*
plnker code here
Your ng-click triggered fine in chrome, I can see your console.logs data.
I check your code, the reason that your search logic is not working and you keep getting "not matching" in your console, is that you are using wrong condition, you are not checking the value, with search string, you are checking "Key/Value object" with search string.
change your if condition in showProduct method to this :
if ($scope.suggestionResults[i][Object.keys($scope.suggestionResults[i])[0]] == searchText) {
console.log(Object.keys(response.data[i])[0]);
$scope.redirectLink = Object.keys(response.data[i])[0];
}else{
$scope.redirectLink = "not matching";
}
Check this plunkr
I wrote another method
$scope.inputChanged = function(data){
var obj = _.find($scope.suggestionResults,function(o){
var keyArr = Object.keys(o);
return o[keyArr[0]] === data
})
$scope.showProduct(obj)
}
which will work as a workaround to achieve what you are looking for. From here you can call $scope.showProduct(obj) and achieve ng-click event behavior
I have a button in my application which works for ng-click for now..... I need to insert a functionality to the button as such it should be notified when the content of the table is changed by inputting some values while editing the table
Can I use ng-click along with ng-change.... How can I relate the ng-change of the table with the button?
<button type="button" ng-disabled="vm.currentYear === vm.endYear"
ng-attr-title="{{vm.currentYear === vm.endYear ? 'You\'ve reached the ending year for '+ vm.selectedProjectName : 'Load baselines for ' + (vm.currentYear+1)}}"
class="btn btn-outlined " ng-click="vm.changeYear(vm.currentYear+1)"
ng-model="baseline.data[$index]"
ng-change="vm.enableSaveButton($parent.$parent.$index, $parent.$index, $index, baseline)">
<i class="fa fa-caret-right"></i>
</button>
ng-change work with input tag only. And ng-change require ng-model.
<input type="text" ng-model="test" ng-change="seeChange()" />
Evaluate the given expression when the user changes the input. The
expression is evaluated immediately, unlike the JavaScript onchange
event which only triggers at the end of a change (usually, when the
user leaves the form element or presses the return key).
https://docs.angularjs.org/api/ng/directive/ngChange
I have an Angular form that is parsing some JSON data.
I'm rendering using ng-repeat. However, I'm having an issue in that the form never becomes valid when a radio button in each group is selected.
I suspect the issue lies with the ng-model in each input, but I can't seem to figure out the correct way to dynamically create an ng-model inside an ng-repeat.
Form block code:
<form name="posttestForm">
<alert ng-repeat="alert in alerts"
type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<div class="well question-well" ng-repeat="question in questions">
<p>
<strong>{{question.question}}</strong>
</p>
<ul>
<li ng-repeat="answers in question.answers">
<input ng-model="Q[question.id]"
type="radio" name="Q{{question.id}}" value="{{answers.id}}"
required="" data-key="{{answers.isCorrect}}" />{{answers.answer}}
</li>
</ul>
</div>
<button type="submit" class="btn btn-primary" ng-click="EvaluatePosttest(3)"
ng-show="!TestPassed">
Submit Questions</button>
</form>
Here's a Plunkr that shows the dynamic code and demonstrates the form never turning valid when a radio button in each group is selected.
http://plnkr.co/edit/HQGPIOCdn3TGlE96CpK5?p=preview
And here's a Plunkr using static content displaying it working.
http://plnkr.co/edit/ZFt2VnBfaQjuu73kaNQJ?p=preview
Just add this in your javascript controller
$scope.Q = [undefined,undefined,undefined,undefined,undefined,undefined];
Explanation : you set ng-model as Q[question.id] but Q is undefined so the ng-model won't ever work. You always must initialize variable in the controller. The only case it works not initialize is when you do :
ng-model="test"
if you do
ng-model="test.test"
ng-model="test[0]"
It won't ever work if it's not initialized properly.
You can do a custom form validation inside your controller. In your case:
$scope.Q = [];
$scope.$watch('Q', function (Q) {
$scope.posttestForm.$setValidity('count', Q.length >= $scope.questions.length);
}, true);
Inside that, you can do whatever validation you want.
Here's the working plunkr: http://plnkr.co/edit/7Ww4fjJzkDjifPaZ2QtG?p=preview
I can not get value of input wrapped by ng-if
this is html code
<div ng-controller="Home">
<form ng-submit="startChat(visitor)" >
<div class="lkv_getting">
<div ng-if="formsetting.name == true">
<input required ng-class="lkv_name_class" ng-model="visitor.name" id="lkv_name" name="lkv_name" type="text" class="lkv_input" placeholder="Nhập họ tên" />
</div>
<textarea required maxlength="100" placeholder="Gõ tin nhắn!!" ng-model="visitor.msg" id="message_input" name="lkv_message_input"></textarea>
<button class="lkv_button" type="submit" id="lkv_start" title="Message">Bắt đầu</button>
</div>
</form>
</div>
and controller
$scope.startChat = function (visitor) {
var user = visitor.name; // the value is undefine
var msg = visitor.msg; // but this one has value
};
Any one can help me? Thanks in advance
When using ng-if the DOM elements won't get rendered if formsetting.name ever equals false. That means you won't be able to get your input values back since they won't be rendered to the DOM. Check to see that formsetting.name is indeed true or initialized to true in your controller if that makes sense for you. If formsetting.name can change values you probably want to use ng-show instead. Using ng-show draws the elements to the DOM but hides them so you can still access them.