current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.3 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

need some help on angular i have no knowledge on, but i have a work to do ^^' . My problem is when i write into my inputs i can't get the ng-model return and get a scope error telling $scope.newemployee is undefined(corrected). New problem my table 'List' stay empty like my object employee

<!DOCTYPE html>

<html ng-app="employe">
<head>

    <meta charset="utf-8" />
    <title>
        List of employe
    </title>
    <meta name="viewport" content="with=device-width , initial-scale=0 ,shrink- to-fit=no" />
    <link rel="stylesheet" href="./files/bootstrap.min.css" type="text/css" />
    <link rel="stylesheet" href="./files/style.css" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js" type="text/javascript">
    </script>
    <script type="text/javascript" src="./files/code.js">
    </script>
</head>

<body>
    <div ng-controller="FormController as FormCtrl">
        <button ng-click="FormCtrl.setShow(2)">Add new employee</button>
        <form class="form-horizontal" ng-controller="ListCtrl" name="infoForm" ng-submit="addEmployee()" ng-show="FormCtrl.isShow(2)" novalidate="" id="infoForm">
            {{newemployee}}
            <h2>
                Add/Edit employee
            </h2><!-- NOM -->
            <div class="form-group">
                <label for="name" class="col-xs-5 control-label">Name</label>
                <div class="col-xs-2">
                    <input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name" />
                </div>
            </div><!-- AGE -->
            <div class="form-group">
                <label for="age" class="col-xs-5 control-label">Age</label>
                <div class="col-xs-2">
                    <input type="number" ng-model:"newemployee.age" class="form-control" ng-required="true" />
                </div>
            </div><!-- NICKNAME -->
            <div class="form-group">
                <label for="nickname" class="col-xs-5 control-label">Nickname</label>
                <div class="col-xs-2">
                    <input type="texte" ng-model:"newemployee.nickname" class="form-control" ng-required="true" />
                </div>
            </div><!-- EMPLOYEE -->
            <div class="form-group">
                <label for="employee" class="col-xs-5 control-label">Employee</label>
                <div class="col-xs-2">
                    <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="Yes" ng-model:"newemployee.yes" value="yes" />Yes</label> <label class="radio-inline"><input type="radio" name="inlineRadioOptions" id="No" ng-model:"newemployee.no" value="no" />No</label>
                </div>
            </div><!-- JOB -->
            <div class="form-group">
                <label for="job" class="col-xs-5 control-label">Job</label>
                <div class="col-xs-2">
                    <select ng-model:"newemployee.job" class="form-control">
                        <option>
                            Founder
                        </option>
                        <option>
                            Market chef
                        </option>
                        <option>
                            Stage
                        </option>
                    </select>
                </div>
            </div><!-- ANNEE -->
            <div class="form-group">
                <label for="years" class="col-xs-5 control-label">Years</label>
                <div class="col-xs-2">
                    <input type="number" ng-model:"newemployee.years" class="form-control" ng-required="true" />
                </div>
            </div><!-- BUTTON -->
            <div class="center">
                <button type="submit" class="btn btn-default btn-success">Validate</button> <button class="btn btn-default btn-warning" ng-click="FormCtrl.setShow(1)">Cancel</button>
            </div>
        </form>
    </div>

</body>

Here angularjs code

(function () {
      var app = angular.module('employe', []);

      app.controller("FormController", function () {
          this.Edit = 1;

          this.isShow = function(checkEdit){
            return this.Edit == checkEdit;
          };

          this.setShow = function(setShow){
            return this.Edit = setShow ;

          };
          console.log(this.Edit);

      });

      app.controller("ListCtrl", ['$scope', function($scope) {
        $scope.list = /*employee*/[];

        $scope.addEmployee = function(){
            $scope.list.push({
                name: $scope.newemployee.name,
                age : parseInt($scope.newemployee.age),
                nickname : $scope.newemployee.nickname,
                job : $scope.newemployee.job ,
                years : parseInt($scope.newemployee.years),
                salarie : $scope.newemployee.yes + $scope.newemployee.no                  

            });

        };


      }]);



    })();
share|improve this question
up vote 0 down vote accepted

You should probably initialize the newemployee object inside ListCtrl as follows

app.controller("ListCtrl", ['$scope', function($scope) {
    $scope.list = /*employee*/ [];
    $scope.newemployee = {};
    $scope.addEmployee = function() {
        $scope.list.push({
            name: $scope.newemployee.name,
            age: parseInt($scope.newemployee.age),
            nickname: $scope.newemployee.nickname,
            job: $scope.newemployee.job,
            years: parseInt($scope.newemployee.years),
            salarie: $scope.newemployee.yes + $scope.newemployee.no

        });
    };
}]);

Sample input tag

<input type="text" class="form-control" ng-required="true" name="name" ng-model="newemployee.name" />
share|improve this answer
    
Thanks newtt i have no longer the error message but my object is still empty :/ – Azerty Azerty Oct 11 at 14:01
    
In your form inputs, you need to add ng-model="newemployee.name for the name and so on and so forth. Check edited answer for details – Newtt Oct 11 at 14:06
    
i''ve got them : <input type="texte" ng-model:"newemployee.name" class="form-control" ng-required="true" name="name"> on each of my input but don't know why they didn't appear . i will try to correct this – Azerty Azerty Oct 11 at 14:17
    
Because you're using ng-model:"newemployee.name" instead of ng-model="newemployee.name". ng-model is still an attribute and you need to use = instead of :. – Newtt Oct 11 at 14:34
    
That's why it was red on my bracket '-' . – Azerty Azerty Oct 11 at 14:39
up vote 0 down vote

You have to link the input fields to the properties you want to set. You can do this with ng-model like this:

<input type="texte" class="form-control" ng-required="true" name="name" ng-model="$scope.newemployee.name" />
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.