AngularJS does not automatically generate input elements for editing purposes

Question

AngularJS does not automatically generate input elements for editing purposes

Trying to make real-time edits to an element by triggering a function on ng-click using AngularJS.

My HTML code:

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

And here is the JavaScript:

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 is missing in my implementation? Could the editQuestion function be incorrect?

javascript angularjs

Answer 1

Answer №1

$scope.questions[name] does not exist. There is no

$scope.questions["Hey, are you a fan of hiking"]

. However, there is a $scope.questions["1"]. Consider using questions.1.ID instead of questions.1.name

In addition, @c-smile makes a valid point. Avoid starting your keys with numbers in JavaScript as it is not allowed. A better option would be to use something like 'n1'

Answer 2

$scope.questions[name] does not exist. There is no

$scope.questions["Hey, are you a fan of hiking"]

. However, there is a $scope.questions["1"]. Consider using questions.1.ID instead of questions.1.name

In addition, @c-smile makes a valid point. Avoid starting your keys with numbers in JavaScript as it is not allowed. A better option would be to use something like 'n1'

Answer 3

Answer №2

To display an input field, you have to write the code for it.

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

In the controller, you can define what data you want to add like

$scope.questions.push({'name':$scope.newquestion.name,'id':$scope.newquestion.id});

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

Answer 4

To display an input field, you have to write the code for it.

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

In the controller, you can define what data you want to add like

$scope.questions.push({'name':$scope.newquestion.name,'id':$scope.newquestion.id});

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

Answer 5

Answer №3

The syntax used in questions.1.name is incorrect in JavaScript. Variables in JS cannot begin with a digit, so it is necessary to modify your code to something similar to this:

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

Similarly,

"n1": { ... }

Answer 6

The syntax used in questions.1.name is incorrect in JavaScript. Variables in JS cannot begin with a digit, so it is necessary to modify your code to something similar to this:

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

Similarly,

"n1": { ... }

AngularJS does not automatically generate input elements for editing purposes

Answer №1

Answer №2

Answer №3

Similar questions

The random number generator in TypeScript not functioning as expected

Tips for distinguishing individual submit buttons within a foreach loop

The ng-submit() directive in Angular does not trigger submission when the "Enter" key is pressed in a text field

angularjs $http service fails to create a cookie when sending a POST request but successfully creates one when sending a GET request

Retrieve the value of a duplicated object key from a JSON and replace it with just one unique value

Utilize a WCF Service with HTML and JavaScript

Retrieving user input through JavaScript and transmitting information using Ajax

What is the reason that prototypes are not passed down through inheritance?

Avoiding errors caused by higher order array methods

Generate a fresh array from the existing array and extract various properties to form a child object or sub-array

Numerous points of interaction within ion-item

What is the process of permanently modifying an HTML document using JavaScript?

An unusual html element

What is the purpose of using a single pipe character within a Vue.js template handlebar expression?

Import ES6 code by wrapping it in parentheses

Tips for creating a concise summary of written content

The hidden textbox loses its value when submitting

When using multer to upload a file, the issue of req.files being undefined may

When attempting to remove an object from an array in Vue.js, an error may occur stating that the property of the

Customize hoverIntent to support touch events on mobile devices