如何在angularjs asp.net

时间:2015-07-29 07:27:17

标签: asp.net angularjs

 <div class="section-form" ng-repeat="headings in QuestionsMain">
 <p>{{headings.Title}}</p>

 <ul>
  <li ng-repeat="section in headings.FormSection">
  <h3>{{ section.Title }}</h3>
  <ul>
  <li ng-repeat="group in section.FormGroups">  
  <div>{{ group.Title }}</div>
  <div class="" ng-repeat="questions in group.FormQuestions">
  <h4>{{ questions.QuestionName }} </h4>
   <ul >
  <li ng-repeat="answers in questions.FormAnswers">
  <input type="radio" name="content" value="{{ answers.AnswerCode }}" id="{{ answers.FormAnswer_ID }}" />
<label for="{{ answers.FormAnswer_ID }}" class="radio-style"></label>
</li>
</ul>

</div>

的Javascript

 var eval = angular.module('evalQuestions', []);

 //$scope.QuestionsMain contains json data
 eval.controller('EvalController', ['$scope', 'questions', function ($scope, questions) {
        questions.success(function (data) {

            $scope.QuestionsMain = JSON.parse(data.d);

        });
    }]);


//calling webmethod for getting json data
 eval.factory('questions', ['$http', function ($http) {

return ttp.post('EvaluationTest.aspx/GetEvaluationQuestionandAnswerDetails', { "evalNumber": 1, "languageCode": 'en' })
    .success(function (data) {

        return data;
    })
    .error(function (err) {
        alert(err);
    });
    }]);

这是从我的webmethod

收到的json数据
[  
   {  

      "Title":"Test Title 1",

      "FormSection":[  
         {  
            "ContentType":"GENR",
            "Title":"Test section 1",

            "FormGroups":[  
               {  

                  "Title":"Test Group 1",,

                  "FormQuestions":[  
                     {  

                        "QuestionName":"rate your course?",                  
                        "QuestionCode":"100",
                        "FormAnswers":[  
                           {  

                              "AnswerName":"Excellent",

                              "AnswerCode":"5"

                           },
                           {  

                              "AnswerName":"Very good",

                              "AnswerCode":"4"

                           },
                           {  

                              "AnswerName":"Good",

                              "AnswerCode":"3"

                           },
                           {  

                              "AnswerName":"Fair",

                              "AnswerCode":"2"

                           },
                           {  

                              "AnswerName":"Poor",

                              "AnswerCode":"1"

                           }
                        ]
                     },
                      {  

                        "QuestionName":"rate your food?",                  
                        "QuestionCode":"200",
                        "FormAnswers":[  
                           {  

                              "AnswerName":"Excellent",

                              "AnswerCode":"5"

                           },
                           {  

                              "AnswerName":"Very good",

                              "AnswerCode":"4",

                           },
                           {  

                              "AnswerName":"Good",

                              "AnswerCode":"3",

                           },
                           {  

                              "AnswerName":"Fair",

                              "AnswerCode":"2",

                           },
                           {  

                              "AnswerName":"Poor",

                              "AnswerCode":"1",

                           }
                        ]
                     }
                  ]
               }
            ]
         },
         {  
            "ContentType":"GENR2",
            "Title":"Test section 2",

            "FormGroups":[  
               {  

                  "Title":"Test Group 2",,

                  "FormQuestions":[  
                     {  

                        "QuestionName":"rate your teacher?",                  
                        "QuestionCode":"300",
                        "FormAnswers":[  
                           {  

                              "AnswerName":"Excellent",

                              "AnswerCode":"5"

                           },
                           {  

                              "AnswerName":"Very good",

                              "AnswerCode":"4"

                           },
                           {  

                              "AnswerName":"Good",

                              "AnswerCode":"3"

                           },
                           {  

                              "AnswerName":"Fair",

                              "AnswerCode":"2"

                           },
                           {  

                              "AnswerName":"Poor",

                              "AnswerCode":"1"

                           }
                        ]
                     },
                      {  

                        "QuestionName":"rate your course content?",                  
                        "QuestionCode":"400",
                        "FormAnswers":[  
                           {  

                              "AnswerName":"Excellent",

                              "AnswerCode":"5"

                           },
                           {  

                              "AnswerName":"Very good",

                              "AnswerCode":"4",

                           },
                           {  

                              "AnswerName":"Good",

                              "AnswerCode":"3",

                           },
                           {  

                              "AnswerName":"Fair",

                              "AnswerCode":"2",



                           },
                           {  

                              "AnswerName":"Poor",

                              "AnswerCode":"1",

                           }
                        ]
                     }
                  ]
               }
            ]
         }

      ]
   }
]

我的asp.net页面如下所示

rate your teacher?   5 4 3 2  1  (these are radio buttons)
rate your class?     5 4 3 2  1  (these are radio buttons)
rate your food?      5 4 3 2  1  (these are radio buttons)

上面给出的HTML可能不合适但我认为你可以得到它的上下文。 我可以正确绑定数据。现在我想获取问号和选择的答案码,并在点击提交按钮时将其保存到数据库。

这里可以进行双向数据绑定吗?请告诉我一种或多种可能的方法。

1 个答案:

答案 0 :(得分:0)

您的工厂不需要实现成功(如果您想这样做,您必须返回一个承诺(使用$ q服务))。在你的情况下,使用服务而不是工厂是最好的做法(服务是单身人士)。

eval.service('questions', ['$http', function ($http) {

    var service;
    service.getEval = $http.post('EvaluationTest.aspx/GetEvaluationQuestionandAnswerDetails', { "evalNumber": 1, "languageCode": 'en' });
}]);
    return service;

然后,在您的控制器内,您可以实现承诺:

eval.controller('EvalController', ['$scope', 'questions', function ($scope, questions) {
    questions.getEval().then(function (data) {

        $scope.QuestionsMain = data;

    }, function(error){
        // Handle error here
    });

    $scope.save = function(){
        // Call your question service here and save the object you will give him.
    };

}]);

我认为你的观点是正确的(或差不多)。双向数据绑定将通过角度自动生成。

编辑:

从视图中调用保存功能,您只需添加指令ng-click

即可

例如:

<input type="button" ng-click="save()" value="submit" />