Angularjs does not magically create input element for editing

Question

I'm trying to edit an element in real time by triggering a function on ng-click with AngularJS.

Here's my html:

<div class="row question">{{questions.1.name}} <a href="" class="glyphicon glyphicon-pencil" ng-click="editQuestion(questions.1.name)"></a></div>

And the js:

function QuestionsMap($scope) {
$scope.questions = {
"1": {
  "name": "Hello! Do you like to travel?",
  "ID": "1",
  "answer": {
    "yes": {
      "name": "Yes",
    },
    "no": {
      "name": "No",
    }
  }
}

};
$scope.editQuestion = function (name) {
  $scope.editing = $scope.questions[name];
};
}

What am I missing? Is the editQuestion function not properly written?

What value are you trying to store inside of $scope.editing? — C1pher
– C1pher, Commented Mar 1, 2014 at 17:01

Fresheyeball · Accepted Answer · 2014-03-01 17:08:36Z

2

$scope.questions[name] isn't anything. There is no $scope.questions["Hello, do you like to travel"]. There is however a $scope.questions["1"]. Try passing in questions.1.ID instead of questions.1.name

Also @c-smile is right. Don't start your keys with integers. That is not allowed in js. For this to work you need to switch to something like 'n1'

edited Mar 1, 2014 at 17:08

answered Mar 1, 2014 at 17:02

Fresheyeball

30.1k21 gold badges106 silver badges168 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Mitjans Over a year ago

I've updated the html to ng-click="editQuestion(questions.n1.ID)", renamed to n1, and rewritten the function to $scope.editQuestion = function (name) { $scope.editing = $scope.questions["n1"]; }; And still nothing :S

Eriks · Accepted Answer · 2014-03-01 17:12:56Z

1

input field wont show up magically you have to code that.

<input type="text" ng-model="newquestion"><input type="button" ng-click="add()" value="save">

controller, you can specify what you want to push inside like $scope.questions.push({'name':$scope.newquestion.name,'id':$scope.newquestion.id});

$scope.add = function(){
    $scope.questions.push($scope.newquestion);
    $scope.newquestion = "";    
};

answered Mar 1, 2014 at 17:12

Eriks

3061 gold badge2 silver badges14 bronze badges

Comments

c-smile · Accepted Answer · 2014-03-01 16:57:46Z

1

This questions.1.name is incorrect syntax from JS perspective. Name of the variable in JS cannot start from digit. So you shall refactor your code to something like this:

<div class="row question">{{questions.n1.name}}

and so

"n1": { ... }

answered Mar 1, 2014 at 16:57

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Collectives™ on Stack Overflow

Angularjs does not magically create input element for editing

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related