Apache Cordova 和 Angular - Android - 如何获取表单输入并将其放入联系人对象？

Question

我没能找到任何关于使用 HTML 表单输入 angularJS.

的好文档

我想做的是在我的 HTML 表单中输入值，使用这些值使用 cordova 联系人插件填充联系人对象，然后将其保存到我的设备。

到目前为止，这是我糟糕的代码我知道我需要使用 ng-model 并且之前尝试过设置

name.givenName = $scope.form.name（显然这就是我所说的ng-model）

var droidSync = angular.module('droidSync', ['ionic', 'ngRoute']);

droidSync.config(function ($routeProvider) {
    $routeProvider

    // route for the home page
    .when('/', {
        templateUrl: 'app/pages/main.html',
        controller: 'mainController'
    })

    // route for the manager page
    .when('/manager', {
        templateUrl: 'app/pages/addcontact.html',
        controller: 'managerController'
    })

    // route for the settings page
    .when('/settings', {
        templateUrl: 'app/pages/settings.html',
        controller: 'settingsController'
    });
});

droidSync.controller('mainController', function ($scope) {

});

droidSync.controller('managerController', function ($scope) {
    $scope.saveContact = function(){
        // create a new contact object
        var contact = navigator.contacts.create();
        contact.displayName = "Plumber";
        contact.nickname = "Plumber";            // specify both to support all devices

        // populate some fields
        var name = new ContactName();
        name.givenName = "Jane";
        name.familyName = "Doe";
        contact.name = name;

        // save to device
        contact.save(onSuccess, onError);
    }
});

droidSync.controller('settingsController', function ($scope) {

});

<ion-content class="has-header"
    [scroll="true"]>
    <div class="list">
        <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text" id="txtFirstName"placeholder="Gary">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text" id="txtLastName" "McNeill">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Mobile</span>
            <input type="text" id="txtMobileNo" placeholder="12345665">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Home</span>
            <input type="text" id="txtHomeNo" placeholder="3214569">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Email</span>
            <input type="text" id="txtEmail"placeholder="gary@email.com">
        </label>
        <button id="btnSaveContact" class="button button-block button-balanced" ng-click="saveContact()">
            Save
        </button>
    </div>
</ion-content>

问题的核心是没有完全理解范围和模型以及它们如何相互作用，但文档对我帮助不大。

Answer 1

这样的事情应该有所帮助。

您应该将标签与输入一起使用 'submit'，并且 ng-model 应该作为参数传递给输入。

.controller('managerController', function($scope) {


 $scope.saveContact = function(contact){

  debugger;
        // create a new contact object
        var contact = navigator.contacts.create();
        contact.displayName = "Plumber";
        contact.nickname = "Plumber";            // specify both to support all devices

        // populate some fields
        var name = new ContactName();
        name.givenName = "Jane";
        name.familyName = "Doe";
        contact.name = name;

        // save to device
        contact.save(onSuccess, onError);
    }
})

<ion-content class="has-header"
    [scroll="true"]>
    <form>
        <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text" id="txtFirstName"placeholder="Gary" ng-model="contact.firstName">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text" id="txtLastName" "McNeill" ng-model="contact.lastName">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Mobile</span>
            <input type="text" id="txtMobileNo" placeholder=00000000">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Home</span>
            <input type="text" id="txtHomeNo" placeholder="0009356">
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Email</span>
            <input type="text" id="txtEmail"placeholder="gary@email.com">
        </label>
            <input class="button button-block button-balanced"  type="submit" ng-click="saveContact(contact)" value="Save"/>

    </form>
</ion-content>

Answer 2

    <ion-content class="has-header"
[scroll="true"]>
<form>
    <label class="item item-input item-stacked-label">
        <span class="input-label">First Name</span>
        <input type="text" id="txtFirstName"placeholder="Gary" ng-model="contact.firstName">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Last Name</span>
        <input type="text" id="txtLastName" "McNeill" ng-model="contact.lastName">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Mobile</span>
        <input type="text" id="txtMobileNo" placeholder="654654654" ng-model="contact.mobile">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Home</span>
        <input type="text" id="txtHomeNo" placeholder="6546565654" ng-model="contact.tel">
    </label>
    <label class="item item-input item-stacked-label">
        <span class="input-label">Email</span>
        <input type="text" id="txtEmail"placeholder="gary@email.com" ng-model="contact.email">
    </label>
        <input class="button button-block button-balanced"  type="submit" ng-click="saveContact()" value="Save"/>

</form>

--- 我想这就足够了。

.controller('managerController', function($scope) {


$scope.saveContact = function(){
  console.log($scope.contact)
  //So to assign a new object a value from the scope
  var firstName = $scope.contact.firstName
}

--- 应在联系人 {} 中显示每个 key:value。我不确定对象 new ContactName() 或您如何保留信息...但现在您可以从 $scope.contact 中提取任何表单字段信息。

Answer 3

经过几天的研究，答案似乎很简单。

我从来没有像这样初始化过接触模型

$scope.contact = {};

因此，值是从表单中获取的，但无法传递给变量，因为 $scope.contact 未定义。

这是我从表单中获取名字和姓氏的最终代码

droidSync.controller('managerController', function ($scope) {
    //Initialize model
    $scope.contact = {};

    $scope.saveContact = function () {
        // create a new contact object
        contact = navigator.contacts.create();
        contact.displayName = $scope.contact.firstName;

        // populate some fields
        var name = new ContactName();
        name.givenName = $scope.contact.firstName;
        name.familyName = $scope.contact.lastName;
        contact.name = name;

        // save to device
        contact.save();

        console.log("end of action");
    };
});

<ion-content class="has-header"
    [scroll="true"]>
    <form>
        <label class="item item-input item-stacked-label">
            <span class="input-label">First Name</span>
            <input type="text" name="firstName" placeholder="Gary" ng-model="contact.firstName"/>
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Last Name</span>
            <input type="text" name="lastName" placeholder="McNeill" ng-model="contact.lastName"/>
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Mobile</span>
            <input type="text" id="txtMobileNo" placeholder="00000000"/>
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Home</span>
            <input type="text" id="txtHomeNo" placeholder="0009356"/>
        </label>
        <label class="item item-input item-stacked-label">
            <span class="input-label">Email</span>
            <input type="text" id="txtEmail" placeholder="gary@email.com"/>
        </label>
        <input class="button button-block button-balanced" type="submit" ng-click="saveContact(contact)" value="{{Test}}" />
    </form>
</ion-content>

Apache Cordova 和 Angular - Android - 如何获取表单输入并将其放入联系人对象？

Apache Cordova and Angular - Android - How to take form input and put it into a contact object?

javascript

android

android-contacts

angularjs

cordova