标签: angular-ngmodel

控制器：

$scope.send_index = function(event, val){ 
    console.log(val);
    $scope.variable = 'vm.areas['+val+'].name';
    console.log( $scope.variable ); 
};

这是在视图中：

<select ng-model="vm.areas">
    <option ng-repeat="area in vm.areas"  ng-value="area" id="{{area}}" ng-click="send_index($event, $index)">{{area.name}}
</select>
<input value="{{variable}}">

其中“vm”是我的模型。

表达式内的表达式（Angular）

我的问题是我需要一个 {{array[]}}，将索引作为另一个表达式，

例如：{{Array[{{val}}]}}。

已经尝试过这个：

 $scope.variable = ''+'vm.areas['+val+'].name'+'';

问题出在视图中，“变量”显示为字符串

(vm.areas[0].name)

它没有获得该查询的勇气。

我正在尝试显示联盟中球队名单的列表,然后选择一个.选中后,应将索引league.teams[index]放入homeTeam.teamId.这是HTML:

<select
    ng-model="homeTeam.teamId"
    ng-options="team.name for team in league.teams">
</select>

这里的范围:

$scope.league = {
    teams: [
        { name: "Team#1" },
        { name: "Team#2" }
    ]
};

但它将整个对象添加到homeTeam.teamId,如下所示:

homeTeam: {
    "teamId": { "name":"Team#1" }
}

我怎样才能让它只输入索引,即:

homeTeam: {
    "teamId": 0
}

我正在制作一个小应用程序来学习Angular,并为文本处理制作了一个自定义过滤器.一切都运行正常,除非在我的输出文本有多个空格的情况下,这些会自动缩减为单个空格,这是我不想要的.问题不在我定义的函数中,因为我正在记录输出,这没有问题.

HTML:

<textarea name="textarea" rows="10" cols="50" ng-model="encodeText" placeholder="Type or paste in a message to encode." ></textarea>
<p>Filtered input: {{ encodeText | encode }}</p>

JS:

(function(){
  var app = angular.module('myApp', []);
  app.filter("encode", function() {
    return function(input) {
      if (input) {
        //text processing
        console.log(output);
        return output;
      }
    };
 });

这是一个莫尔斯电码练习.所以控制台日志输出是:

.- -... -.-.   -.. . ..-. 

有两个空格.在页面上我看到:

Filtered input: .- -... -.-. -.. . ..-.

我从Googling看到的唯一建议就是在textarea上使用ng-trim ="false",这没有任何效果.看起来修剪正在过滤器本身内发生.造成这种情况的原因是什么以及如何禁用它？ 代码回购

大家好，我正在尝试提出一个 MCQ 问题，因为我试图从 AngularJS 的单选按钮中捕获选定的值。我面临的主要问题是我正在绑定数据库中的数据，而这些数据是动态的。所以我必须使用 ng-repeat 在视图 HTML 中加载这些问题，所以我无法手动处理这些选项的“ng-model”。当单击提交按钮时，我需要用 [{QuestionId:1:AnswerId:4}, {QuestionId:1:AnswerId:3}...] 或类似的答案来回答问题。这里我制作了一个 JSON 数据用于预览场景。希望它能帮助所有人了解我的问题并可能解决我的问题。提前致谢。

在jsfiddle 中查看代码

这是 HTML

<div ng-app="myapp">
<div ng-controller="testController">
   <form>
    <div ng-repeat="qus in QusWithOptions">
        <td>{{qus.id}}. {{qus.Question}} </td><br />               
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionA_KPI}}" />{{qus.OptionA}}
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionB_KPI}}" />{{qus.OptionB}}
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionC_KPI}}" />{{qus.OptionC}}
<input type="radio" name="taskGroup{{qus.id}}" ng-model="asd" value="{{qus.OptionD_KPI}}" />{{qus.OptionD}}
         </div>
    <button ng-click="SaveAnswer(asd)">Submit</button>
    </form>
</div>

这是js文件

    var app = angular.module("myapp",[]);

    function testController($scope){
    $scope.QusWithOptions = [
        {id:1, Question: "What is best social network site?", …

我有一个<select>带ng-model.我希望我的<option>s 的值是JSON对象.

当用户选择一个选项时,我想显示所选对象的各个属性.

我有以下的plunker显示我想要实现的目标.

<div ng-controller="myCtrl as vm">

    <div>
        Person: 
        <select ng-model="vm.person">
            <option value='{"name": "Matt", "age": "21"}'>Matt</option>
            <option value='{"name": "John", "age": "22"}'>John</option>
        </select>
    </div>


    <br>
    Person: <input type="text" ng-model="vm.person">
    Name: <input type="text" ng-model="vm.person.name">
    Age: <input type="text" ng-model="vm.person.age">

</div>

问题是它vm.person是一个字符串,而不是一个对象,所以我无法访问它的属性.

我已经尝试过fromJson但是它会抛出一个错误,因为它是不可分配的(这是明智的).

<input type="text" ng-model="angular.fromJson(vm.person.name)">

我可以注意改变vm.person,然后在angular.fromJson那里做,但这感觉不对.感觉有更好的方式.

我本质上想要在它到达模型之前解析字符串,这样当它到达模型时,它就是一个javascript对象.这将允许我访问该对象的属性.

在角度处理这个问题的正确方法是什么？

如果没有"有角度"的方式,在Javascript中处理这个问题的常用方法是什么？

编辑

一个分叉的plunker来显示添加a的效果$scope.$watch.

function myCtrl($scope){
    var vm = this;

    $scope.$watch('vm.person', function(){
        vm.person = angular.fromJson(vm.person); …

使用angular2 ngModel进行双向数据绑定时:

<input [(ngModel)]="heroName">

有没有办法只在点击一个按钮后更新模型？或者能够取消用户对输入控件所做的更改？我知道其他的办法,我们可以分割[(ngModel)]其[]和(),只更新模糊或当按下Enter键时等输入-但这不是我想要的.

我需要这个行为,因为用户必须能够取消更改.谢谢

我想通过单击Button将Input-Value传递给函数.

<md-card> 
     <md-input-container><input mdInput ngDefaultControl [ngModel]="newInput">
     </md-input-container> 
     <button md-raised-button (click)="newInputValue(newInput)">Update</button>
</md-card>

但是函数newInputValue(..)中newInput的值总是未定义的.

Hy,我需要通过ngFor中的复选框检查收集选定的值.下面是代码.

 <tr *ngFor="let item of items; let index = index;">
    <td>{{item.bed}}</td>
    <td>{{item.size}}</td>
    <td>{{item.name}}</td>
    <td>
      <input type="checkbox"
             name="domain-{{item.bed}}"
             [(ngModel)]="items[index].id"
      >
    </td>
  </tr>
<button (click)="OnSelect()">Select</button>

在组件中,我试图像这样访问.

component.ts
items = [];
ngOnInIt() {
  this.items = somepromise.then((items) => this.items );
}
OnSelect() {
  console.log(this.items);
}

在选择时,我看到打印的所有项目值而不是选中的复选框值.有什么想法吗 ？

我试图绑定这两个按钮的值 - "是"和"否" - 当点击formData使用ng-model但没有运气时.有没有办法实现这一目的而不是使用ng-model？

<button class="" 
  ng-class="{'button--is-selected--turquoise': isSelected, 
             '' : isSelected===false}" 
  ng-click="isSelected = true" 
  ng-model="formData.yesPool">Yes
</button>

<button class="" 
  ng-class="{'button--is-selected--turquoise': 
  isSelected === false, 'notSelected' : isSelected }" 
  ng-click="isSelected = false" 
  ng-model="formData.noPool"">No
</button>

这是我的控制器:

angular
  .module('testApp')
  .controller('formController', ['$scope', '$http', function($scope, $http) {
    $scope.formData = {};
    $scope.processForm = function(){
    };
  }]);

您好，我最近冒险进行角和离子的开发。

我知道插值和属性绑定是将数据从类传递到模板，并且插值仅支持字符串，而属性绑定支持所有类型。

事件绑定用于将数据从模板传递到类。

使用foll实现两种方式的绑定。4种方式：

1. 使用ngModel banana语法：

<input [(ngModel)]="username">
<p>Hello {{username}}!</p>

Run Code Online (Sandbox Code Playgroud)

2. 没有香蕉语法的NgModel：

<input [ngModel]="username" (ngModelChange)="username = $event">
<p>Hello {{username}}!</p>

Run Code Online (Sandbox Code Playgroud)

3. 没有ngModel：

<input [value]="username" (input)="username = $event.target.value">
<p>Hello {{username}}!</p>

Run Code Online (Sandbox Code Playgroud)

要么

<input [value]="username" (input)="username = varTest.value" #varTest>
<p>Hello {{username}}!</p>

Run Code Online (Sandbox Code Playgroud)

4. 只要实现适当的功能，我们就可以实现自定义的双向绑定（没有ngModel）：

<custom-counter [(counter)]="someValue"></custom-counter>
<p>counterValue = {{someValue}}</p>

Run Code Online (Sandbox Code Playgroud)

我们也有模板引用变量的概念。在输入字段上声明时，可以使用插值在模板中访问字段的值。同样，如果将ngModel分配给模板ref变量。所有这些都可以通过将模板ref变量传递到例如按钮单击事件中来传递到代码类文件，或者我们可以利用ViewChild概念。

我的问题是关于表单（模板驱动的表单）情况下的ngForms和ngModel概念：

1. 我们使用<form #f="ngForm"..... ，然后在每个输入元素中使用带有名称的ngModel，这使得它可以作为form.value.fieldname的属性进行访问。仅仅通过使用模板引用变量，然后将其传递给按钮单击事件，从而可以访问代码中的表单元素，是否可以实现同一目的？那为什么我们必须使用ngForm概念呢？

2. 在元素级别，我们使用ngModel。这与属性绑定或事件绑定相同吗？还是仅仅是让#f可以访问该元素？我们还可以使用模板引用变量来实现相同的功能吗？为了实现双向绑定，我们在这里也使用了banana语法，那么仅在每个元素级别使用关键字ngModel真正以模板驱动形式起作用是什么目的？

3. 使用[[ngModel）] = varName与编写[[ngModel）] name = varName一样吗？

请在此我需要一些澄清。谢谢。