0

I have an array of jobs in my js/controller. Each job object in the array has attributes like jobName, company, city, etc. Is it possible by submitting a form with inputs for the attributes to make it into a job object and then push it into the jobs array in the controller?

So for example, I have a form and I input Software Developer, StackOverflow, NY. Can I wrap the form into an object with the correct attributes and then pass it into the array of jobs in the controller to view it on the view?

Here's my form code so far...

        <form name="jobForm" ng-submit="list.addJob(jobForm)">
                <div class="form-group" id="test">
                    <label>Job Name:</label>
                    <input ng-model="jobName" type="text"/>
                </div>
                <div>
                    <label>Company:</label>
                    <input ng-model="companyDescription" type="text"/>

                    <div><button type="submit">Enter job entry</div>
                </div>

                <!-- this is where the live preview is. ng-model in the input binds it to these values -->
                <blockquote>
                <h4><u>Live Preview</u></h4>
                    <b>Job Name:</b> {{jobName}}
                    <div><b>Company:</b>{{companyDescription}}</div>
                </blockquote>
      </form>

So I want to create a JOB object using the jobName and companyDescription's inputs as the object's name and company attribute. How can I do this? OR am i using a wrong approach. Thank you for the help!

1 Answers1

2

For starters there is a golden rule that ng-model should always be an object property to begin with ... or you can run into lots of child scope problems due to inheritance

So your whole issue is simplified by not using individual scope properties and using one object for all the ng-model in the form to begin with

$scope.job={}
<input ng-model="job.jobName" type="text"/>
<input ng-model="job.companyDescription" type="text"/>

Then when you need to send that to server it is as simple as doing

$http.post(url, $scope.job).then(func....

or pushing to another array

  $scope.allJobs.push($scope.job);
  $scope.job = {} // reset
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Thanks for the quick response. I am a bit confused since im a bit new to javascript. Regarding: $scope.job={} Does $scope.job={} create an object? I come from java and so the implicit creation of objects confuses me a lot –  Jan 30 '17 at 23:55
  • 1
    yes it does ....note that i didn't separate controller code and view code, simply mixed them together since it's not complex ... `$scope.job={}` will go in controller of course – charlietfl Jan 30 '17 at 23:56
  • thanks a lot it worked. what did you mean by that ng-model must be an object property? I did not use $scope, but Controller as "instance". –  Jan 31 '17 at 01:35
  • Watch 3 minute video in this answer http://stackoverflow.com/questions/17606936/why-dont-the-angularjs-docs-use-a-dot-in-the-model-directive – charlietfl Jan 31 '17 at 01:40
  • Won't have problems with individual properties if using `controllerAs` since that will force an object to already be used als – charlietfl Jan 31 '17 at 01:41
  • thanks i'll check it out. Do you know how I can edit the attributes from user input through other user input? –  Jan 31 '17 at 05:27
  • Not sure what you are asking. Also feel free to accept this answer if it helped – charlietfl Jan 31 '17 at 13:34
  • how do i accept it? And so I created my job and added it to the array, which I know was sucessful because it updates on my view where I type the input in the form. I am wondering once I have that job entry in my jobs array tht I can edit the job entrie's attributes. For example, maybe I typed "Software Developer" wrong in the Job Name. It displays "Softwr3 D3ve3loper" or something. I want to edit that name attribute with new input. –  Jan 31 '17 at 20:39
  • Can use an `ng-click` to make that object become `$scope.job` again and it would be bound to form again – charlietfl Jan 31 '17 at 20:44