Угловой не задает привязку данных

У меня проблема с Угловой, похоже, что она не делает двухстороннюю привязку. Я довольно новичок в этом, поэтому я мог бы просто что-то посмотреть. Вот мой код.Угловой не задает привязку данных

Вид:

<ion-view view-title="Update challenge"> 
<ion-content> 

<ion-list> 
    <ion-item> 
    Current total 
    <span class="item-note"> 
     {{challengeProgress.current_total_reps}} 
    </span> 
    </ion-item> 

    <ion-item> 
    Ultimate goal 
    <span class="item-note"> 
     {{challengeProgress.total_reps}} 
    </span> 
    </ion-item> 

    <ion-item> 
    Todays goal 
    <span class="item-note"> 
     {{todaysReps}} 
    </span> 
    </ion-item> 

    <ion-item> 
    Left for today 
    </ion-item> 


    <ion-item> 
    <label class="item item-input"> 
     <input type="text" placeholder="Performed reps" ng-model="reps"> 
    </label> 
    </ion-item> 
    <div class="button button-calm button-block" ng-click="updateProgress()">Update!</div> 
    Reps {{reps}} 
</ion-list>

Контроллер:

$scope.reps; 
$scope.updateProgress = function(reps){ 
    console.log(reps); 
    SendToAPI.updateChallenge(u_id, c_id, toAdd); 
}

повторений кажется неопределенным и {{}} повторений не обновляется либо.

источник

2016-01-27 Bas Pauw

пользователь '$ scope.reps' в контроллере. –

показать нам ваш контроллер – hgoebl

'ion-item' является дочерним элементом' ion-list', что означает, что у вас есть более одного элемента, который может иметь модель 'reps', но вы ссылаетесь на' reps' * вне * «ионный элемент», подразумевая, что есть только один. – Claies

Это, как представляется, сочетание вопросов, связанных с ионной структуры.

Первой проблемой является то, что элементы ion-item фактически создают дочернюю область, а потому, что reps является примитивным, а не объектом, он не отображается в других областях из-за наследования прототипа. Это легко устранить, гарантируя, что reps находится внутри того же ion-item как функция, которая будет его потреблять, хотя его также можно решить, создав объект на $scope, $scope.workout.reps, например, который не имеет таких же проблем с наследованием.

Вторая проблема заключается в том, что сама функция никогда не срабатывает. На первый взгляд, это похоже на проблему с CSS в ионной форме, но ее легко фиксировать, заменив div на ion-item.

Ниже показаны рабочие изменения в целях:

<ion-item> 
    <label class="item item-input"> 
    <input type="text" placeholder="Performed reps" ng-model="reps"> 
    </label> 

    <ion-item class="button button-calm button-block" 
      ng-click="updateProgress(reps)">Update!</ion-item> 
    Reps {{reps}} 
</ion-item>

http://codepen.io/Claies/pen/EPEBZN

Примечание в codepen, я вхожу и переданному в reps и $scope.reps, чтобы доказать, что существует проблема наследования.

источник

2016-01-27 08:55:20 Claies

Это помогло много, я получил его сейчас! Большое спасибо! –

Нет необходимости передавать reps в качестве параметра. У вас может быть доступ к функции $scope.updateProgress как $scope.reps.

HTML:

<div class="button button-calm button-block" ng-click="updateProgress()">Update!</div>

JS:

$scope.updateProgress = function(){ 
    console.log($scope.reps); 
    //SendToAPI.updateChallenge(u_id, c_id, toAdd); 
}

Пожалуйста, проверьте Plunker

источник

2016-01-27 06:10:57

. Именно это я и подумал, но это не сработало так или иначе –

Bas не кажется, что у вас есть 1. объявили приложение и 2. обернуты ваш HTML с ng- контроллер. Без контроллера отсутствует связь между вашим HTML и вашим контроллером. Как вы можете видеть 2 способом связывания нет необходимости в нг-клик, как он обновляется в HTML, а также контроллера

Вот основной рабочий пример кода:

https://plnkr.co/edit/w2B7iRcaoTiOCdL1JJTX?p=preview

<!DOCTYPE html> 
    <html ng-app="plunker"> 

    <head> 
    </head> 

    <body ng-controller="MainCtrl"> 
     <h1>Hello Plunker!</h1> 
     <label class="item item-input">Label</label> 
     <input type="text" placeholder="Performed reps" ng-model="name" /> 
     // BUTTON NOT NEEDED for update but can used for some other event 
     <button class="button button-calm button-block" ng-click="updateProgress()">Update!</button> 
     <p>Hello {{name}}!</p> 
    </div> 
    </body> 

    </html>

Сценарий:

(function(angular) { 
    'use strict'; 
var myApp = angular.module('myApp',[]); 

myApp.controller('GreetingController', ['$scope', function($scope) { 
    $scope.name = "Hello World"; 

    $scope.updateProgress = function(val){ 
    console.log(reps); 
     $scope.name = val; 
    }; 

}]); 

})(window.angular);

источник

2016-01-27 07:54:32 Nolan

Угловой не задает привязку данных

ответ

Смежные вопросы