0

I am new in Angular, recently i faced issue where, I am not able to get value : ng-model value($scope.yourAns, $scope.questionID) in controller, once i submit my form, I will be happy if I can find some solution or help for this problem.

Below is my angular code.

App.js

var wmlabApp = angular.module('wmlabApp', [
    'ngRoute',
    'ngMaterial',
    'labcatControllers',
]);
wmlabApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/questionList/:qId', {
        templateUrl: 'view/questionAndAns.html',
        controller: 'questionAndAnsCtrl'
    }).
    otherwise({
        redirectTo: '/library'
    });
}]);

questionAndAns.html

<div>
<div ng-repeat="item in items">

    <h1>{{item.question}}</h1>
    <hr />
    <div ng-if="item.answer">
        <h3>{{item.answer.length}} Answers</h3>
        <ul>
            <li ng-repeat="ans in item.answer">
                <h5>{{ans.aId}}</h5>
                <p id="ans.aId">{{ans.answers}}</p>
            </li>
        </ul>
        <hr />
    </div>

    <h3>Your Answer</h3>
    <div>
        <div id="messages" ng-show="message">{{ message }}</div>
        <form ng-submit="processForm()">
            {{item.qId}}
            <input type="hidden" ng-model="questionID" ng-value="questionID = item.qId" id="qID" ng-class="{ 'has-error' : errorqId }" name="questionID" />
            <span class="help-block" ng-show="errorqId">{{ errorqId }}</span>

            <textarea name="yourAns" ng-model="yourAns" ng-class="{ 'has-error' : errorAns }"></textarea>
            <span class="help-block" ng-show="errorAns">{{ errorAns }}</span>

            <input type="submit" id="submit" value="Submit" />
        </form>
    </div>

</div>

controller.js

labcatControllers.controller('questionAndAnsCtrl', ['$scope', '$http', '$routeParams',
function($scope, $http, $routeParams) {
    var param = {
        "qId": $routeParams.qId
    };
    
    $http.post('questionAndAns.php', param).success(function(data) {
        $scope.items = data;
    });
    console.log($scope.yourAns);
    console.log($scope.questionID);
    
    $scope.processForm = function() {
        var params = {
            "yourAns" : $scope.yourAns,
            "questionID" : $scope.questionID    
        }
        console.log(params)
        $http.post('setQuestionAns.php', params).success(function(data) {
                console.log(data);
                if (!data.success) {
                    $scope.errorAns = data.errors.ans;
                    $scope.errorqId = data.errors.qId;
                } else {
                    // if successful, bind success message to message
                    $scope.errorAns = ""
                    $scope.errorqId = ""
                    
                    $scope.message = data.message;
                    $scope.formData.yourAns = "";
                    var param = {
                        "qId" : $scope.formData.questionID
                    }
                    $http.post('questionAndAns.php', param).success(function(data) {
                        $scope.items = data;
                    });
                }
            });
    };
}]);
Community
  • 1
  • 1
Ashish Mehta
  • 7,226
  • 4
  • 25
  • 52
  • 1
    If you are planning to use your form inside ng-repeat then you have to make certain changes to your html. Have a look at this for more reference. http://stackoverflow.com/questions/17865785/angularjs-ng-model-inside-ng-repeat. The ng-repeat needs to something like below.
  • key = {{key}}, value = {{value}}, itemsInObj[key] =
  • – J-D Oct 27 '15 at 11:49
  • to expand on what @J-D has said, you don't have a single `yourAns`, you have as many `yourAns` as you have `items`, so the controller can't possibly know which one is the one you want to submit. – Claies Oct 27 '15 at 11:51
  • @J-D So. What value should i put in ng-model so that i can access value in controller – Ashish Mehta Oct 27 '15 at 14:27
  • @J-D Thanks for ur quick feedback. you have suggested works fine when there is static. but i require dynamic. $scope.customFields = ["Age", "Weight", "Ethnicity"]; //this is static $scope.formField = [,,,,,,..] //to my requirement – Ashish Mehta Oct 27 '15 at 14:32