本地存储获得角度值并传递给输入

时间:2017-06-26 19:22:56

标签: javascript angularjs local-storage

在此函数中,我将值name,surname,email传递给本地存储。我想将这些值用于我的输入表单,以便用户在使用一次后不必输入这些值。如何在我的视图HTML中打印每个值?

function submit() {  
    if($rootScope.name!=null)    {
        var JSONObject = {
             "name":$rootScope.name,
             "surname":$rootScope.surname,
             "email":$rootScope.email,
             "review":$rootScope.review
            }
        var temp={
            "name":$rootScope.name,
             "surname":$rootScope.surname,
             "email":$rootScope.email
        }
        $scope.localArray.push(temp);
        localStorageService.set("wimmtkey", $scope.localArray);
        var obtained_array = localStorageService.get("wimmtkey"); 

        var Results = UniversalService.PostReview(JSON.stringify(JSONObject));
        }
    }

这是我的view.html

<form name="form" ng-submit="vm.submit()" role="form">
        <div >
            <div>
                <div class="form-group">
                    <label for="name">Name</label>
                    <input type="text" name="text" id="name" class="form-control" ng-model="vm.name" placeholder="Enter name here" required />
                    <span ng-show="form.name.$dirty && form.name.$error.required" class="help-block">Name is required</span>
                </div>
            </div>

            <div>
                <div class="form-group">
                    <label for="surname">Surname</label>
                    <input type="text" name="text" id="surname" class="form-control" ng-model="vm.surname" placeholder="Enter surname here" required />
                    <span ng-show="form.surname.$dirty && form.surname.$error.required" class="help-block">Surname is required</span>
                </div>
            </div>

             <div>
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" name="email" id="email" class="form-control" ng-model="vm.email" placeholder="Enter email here" required />
                    <span ng-show="form.email.$dirty && form.email.$error.required" class="help-block">Email is required</span>
                </div>
            </div>

            <div>
                <div class="form-group">
                    <label for="review">Review</label>
                    <input type="text" name="text" id="review" class="form-control" ng-model="vm.review" placeholder="Enter review here" required />
                    <span ng-show="form.review.$dirty && form.review.$error.required" class="help-block">Review is required</span>
                </div>
            </div>

           <div class="form-actions">
                <button id="submit" type="submit" onclick="passInfo()" class="btn btn-primary">Submit</button>
                <label style="display:none" id="label"><font color="white">Succesfully added!  

                <a onclick="refresh()" href="../ang/#!/review">Add new review</a></label> or 
                <a href="../ang/#!/">View reviews</a>
            </div>
        </div>

    </form>

2 个答案:

答案 0 :(得分:1)

编写init函数以获取本地存储数据并将其设置为$scope变量

HTML

<div ng-init="initialise()">

<input type="text" name="text" id="review" class="form-control" ng-
 model="obtained_array.review" placeholder="Enter review here" required />
//Rest of the HTML code goes here
</div>

在控制器中

$scope.initialise = function(){

 $scope.obtained_array = localStorageService.get("wimmtkey"); 

}

答案 1 :(得分:0)

  .datepicker{display: inline-block; width: 94%;}