Question

我正在尝试使用单选按钮，输入文本和复选框创建类似于CV的生成器。我创建了2个视图/状态。第一个视图是用户输入值的时间，第二个视图仅打印选定的值。到目前为止，我设法打印了用户输入的文本和单选按钮中的选定值，但是我似乎找不到找到通过复选框（选中：true）并打印它的方法。

这是到目前为止的代码：

第一视图（居住国）：

<ion-view view-title="Hello App">
  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">CV test</h1>
    </ion-header-bar>
    <ion-content>

      <li class="item">Input your name</li>
      <div class="list list-inset">
        <label class="item item-input">
          <input type="text" placeholder="Insert your name and last name" ng-model="username.name">
      </div>

      <li class="item">Higher degree of education obtained</li>
      <div class="list">
        <div class="item item-divider">
                     Selected Value: {{ data.mobileapp }}
     </div>
     <ion-radio ng-repeat="item in mobileappsList"
                              ng-value="item.value"
                              ng-model="data.mobileapp">
                     {{ item.text }}
      </ion-radio>

      </div>

      <li class="item">Skills</li>
      <div class="list">

<ion-checkbox ng-repeat="item in skills" ng-model="item.checked" ng-value="item.checked">
           {{ item.text }}
        </ion-checkbox>

      </div>

      <button class="button button-block button-positive" ng-click="click()"> <!--button to let the user click and take some action -->
    Submit
    </button>

    </ion-content>
  </ion-pane>
</ion-view>

第二视图（提交状态）：

<ion-view view-title="Submit CV">
  <ion-content>
    <h1 class="title">Data submitted</h1>

    <h3 class="title">Name:</h3>
      <div class="item item-text-wrap">
      {{name}}
    </div>

    <h3 class="title">Education:</h3>
      <div class="item item-text-wrap">
      {{data}}
    </div>

    <h3 class="title">Skills:</h3>
      <div class="item item-text-wrap">
      {{supers}}
    </div>

</ion-content>
</ion-view>

第三视图（app.js）：

var myapp = angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {

    if (window.cordova && window.Keyboard) {
      window.Keyboard.hideKeyboardAccessoryBar(true);
    }

    if (window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})


myapp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

  .state('home', {
    url: '/home',
    templateUrl: 'templates/home.html',
    controller: 'HomeCtrl',
    params: {
      name: '',
      mobileapp: '',
      skills: ''
    }
  })

  .state('submit', {
    url: '/submit/:name'+':data'+':',
    templateUrl: 'templates/submit.html',
    controller: 'SubmitCtrl',
  })



$urlRouterProvider.otherwise('/home');



});

myapp.controller('HomeCtrl', function($scope, $state) {

  $scope.username={name: ""};

  $scope.supers={skills: ""};


    $scope.skills= [
       { text: "Programming", checked: true },
       { text: "Problem-solving skills", checked: false },
       { text: "Leadership", checked: false },
       { text: "IS management", checked: false },
       { text: "Communicator", checked: false }
     ];

    $scope.data = {mobileapp: ""};

    $scope.mobileappsList = [
      { text: "High school", value: "HS" },
      { text: "Bachelor", value: "BA" },
      { text: "Master", value: "MA" }
    ];
$scope.click = function(){
  $state.go('submit', {name:$scope.username.name, data:$scope.data.mobileapp, supers:$scope.supers.skills});
}

});


myapp.controller('SubmitCtrl', function($scope, $stateParams) {
console.log($stateParams);
$scope.name = $stateParams.name;
$scope.data = $stateParams.data;
$scope.supers = $stateParams.supers;


});

如您所见，我想通过密码并打印“编程”文本/值。

谢谢

传递和打印复选框值JSON

0 个答案: