current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

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

share|improve this question

1 Answer 1

up vote 3 down vote accepted

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>
share|improve this answer
    
Thanks, the event bit worked :) And it's not a matter of not wanting to, it's just the environment it's working on won't allow it that easily :) –  Alias Jun 3 '14 at 17:03

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.