0

I have a form with drop downs like this: 

<select id="relevance" class="form-control input-lg" ng-model="formData.relevance"></select>

I can fill all these dropdowns using jquery that maps the json data to the appropriate dropdown like this: 

$.getJSON("url/to/the/json", function(data) {

// get values from database
 var rel_val = data[0].relevance;

// set fields using jquery
$("#relevance").val(rel_val);

This all works great, but if I click on the form submit button:

<button type="submit" id="submit_button" class="btn btn-primary btn-lg btn-block" ng-click="createTodo();">SAVE CHANGES</button>

It will not write anything to the database (postgres). I know that the "createTodo()" works because if I manually make changes to the dropdowns (so set by me, not jquery) the form will submit the data properly.

My "createTodo" looks like this: 

// Create a new todo
$scope.createTodo = function(todoID) {
    $http.post('/api/v1/todos', $scope.formData)
        .success(function(data) {
            $scope.formData = {};
            $scope.todoData = data;
            console.log(data);
        })
        .error(function(error) {
            console.log('Error: ' + error);
        });
};

So, how can I still submit my form data using values set by jquery instead of manually? Does it have something to do with binding?

I have tried adding this to my controller: 

        $http.get('/api/v1/todos')
        .success(function(data) {
                 $scope.formData.relevance = data[0].relevance;
                 })

where my ng-model is ng-model = "formData.relevance" and my value of relevance comes from data[0].relevance.

Cybernetic
  • 12,628
  • 16
  • 93
  • 132
  • 3
    You're circumventing the entire point of Angular... To fix: (1) bind your data to a variable in the controller, (2) expose that variable in the view with `ng-model` on your inputs, (3) get rid of jQuery altogether – Tyler Jul 21 '15 at 20:18
  • Makes no sense using `$.getJSON` in angular app – charlietfl Jul 21 '15 at 20:37
  • okay that makes sense. Sorry, new to angular. So I understand how I can get the results I need inside the controller. But how do I pass these back to the view using the ng-model? – Cybernetic Jul 21 '15 at 20:40
  • Just assign values to $scope.variable inside controller where 'variable' is what you binded in ng-model attribute. – Keammoort Jul 21 '15 at 20:45
  • check out http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background . While learning (even after) angular, it is better to just forgo jquery altogether. – csbarnes Jul 21 '15 at 20:45
  • So my ng-model is ng-model="formData.relevance" in my view. I tried $scope.formData.relevance = variable in my controller..... but doesn't work. – Cybernetic Jul 21 '15 at 20:50
  • Can't create a property of object if the object doesn't exist...is `$scope.formData` defined as object first? – charlietfl Jul 21 '15 at 21:31
  • yes, above the code I just posted is this: $scope.formData = {}; – Cybernetic Jul 21 '15 at 21:33
  • Got it...thanks guys. I have removed all jquery from the application and everything is now running as angular. Cheers. – Cybernetic Jul 22 '15 at 18:46

0 Answers0