Updating information dynamically in a controller based on an ng-repeat from a different controller in AngularJS

Question

Updating information dynamically in a controller based on an ng-repeat from a different controller in AngularJS

To enhance comprehension, I've created a straightforward example.

For this scenario, ng-repeat is used to call a template that has its own controller. However, the controller of the template requires injected data from a service for each ng-repeat iteration. In this case, it should be the answer to the query at hand. How can this be accomplished?

<div ng-repeat="fighter in fighters">
    <div ng-if="fighter.state">
        {{fighter.question}}
        <div ng-include="'template.html'" ng-controller="Controller2"></div>
    </div>
    <br>
    <br>
</div>

If you wish to view the complete working demo, visit this Plunker:

DEMO PLUNKER

javascript angularjs controller angularjs-ng-repeat

Answer 1

Answer №1

To start, open your template.html file and create a ng-init function to pass the object.

<div ng-controller="Controller2" ng-init="getAnwser(fighter)">
  <div>
    <!-- Insert question from database here -->
    <input type="text" ng-model="answer"  />
  </div>
  <div>
    <button ng-click="checkAnswer()">
      ANSWER
    </button>
    <div ng-show="showAnswer">Correct</div>
  </div>

</div>

Next, in your controller2, implement the function as follows:

$scope.getAnwser = function(obj){
  console.log(obj.answer)
}

For a demonstration of this functionality, you can check out this Demo.

Answer 2

To start, open your template.html file and create a ng-init function to pass the object.

<div ng-controller="Controller2" ng-init="getAnwser(fighter)">
  <div>
    <!-- Insert question from database here -->
    <input type="text" ng-model="answer"  />
  </div>
  <div>
    <button ng-click="checkAnswer()">
      ANSWER
    </button>
    <div ng-show="showAnswer">Correct</div>
  </div>

</div>

Next, in your controller2, implement the function as follows:

$scope.getAnwser = function(obj){
  console.log(obj.answer)
}

For a demonstration of this functionality, you can check out this Demo.

Updating information dynamically in a controller based on an ng-repeat from a different controller in AngularJS

Answer №1

Similar questions

Guide on how to load just the content section upon clicking the submit button

When utilizing CKEditor in conjunction with ExpressJS, HTML tags may be displayed in the browser

What sets 'babel-plugin-module-resolver' apart from 'tsconfig-paths'?

What is the best method for styling arrays displayed by React in version 15 using CSS?

Tips and tricks for bypassing the annoying "save as" popup while downloading files remotely using SauceLabs

AngularJS retrieves entire video file for HTML5 video tag

The React component using createPortal and having its state managed by its parent will remain static and not refresh upon state modifications

The modification of a controller's attribute does not impact the view

Issue with ng-pattern validation for email not functioning as expected

Azure App Service for Mobile and Web applications

Error message in React Js indicating the absence of a specified file or directory: "Package.json cannot

JavaScript: What is the concept of overriding function named params?

Issues with Javascript Arrays not adding objects with duplicate values

How do I make a component in React delete itself from a page when its internal state changes?

JavaScript is unable to identify the operating system that is running underneath

Accessing the data from an HTML5 slider using JQuery

Rendering data from an API using v-if

Column Arrangements in a Table

Can JavaScript be used to determine if any code has been executed from the browser's console?

Tips for enhancing undo/redo functionality when working with canvas drawings in React