[Angularjs]ng-repeat中使用ng-model遇到的问题

前端之家收集整理的这篇文章主要介绍了[Angularjs]ng-repeat中使用ng-model遇到的问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写在前面

获取不到它的值,确实挺奇怪的。

系列文章

一个例子

修改,这个时候我们就需要获取当前对象的某个属性代码片段及视图如下所示:

Meta ng-repeat和ng-model Meta $scope.pepoles </span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt; [{ </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;id</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;1</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;name</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;zhangsan</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;gender</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;男</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt; },{ </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;id</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;2</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;name</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;zhangsan2</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,{ </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;id</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;3</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;name</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;zhangsan3</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;,</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;gender</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;: </span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;男</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt; }]; console.log($scope.pepoles); }); </span><span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;script</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">head<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">body<span style="color: #0000ff;">>

<span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;div </span><span style="color: #ff0000;"&gt;ng-controller</span><span style="color: #0000ff;"&gt;="DetailsController"</span><span style="color: #0000ff;"&gt;></span>

    <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;ul</span><span style="color: #0000ff;"&gt;></span>
        <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;li </span><span style="color: #ff0000;"&gt;ng-repeat</span><span style="color: #0000ff;"&gt;=" p in pepoles"</span><span style="color: #0000ff;"&gt;></span><span style="color: #000000;"&gt;
            ID:{{p.id}}</span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br </span><span style="color: #0000ff;"&gt;/></span><span style="color: #000000;"&gt;
            name:{{p.name}}</span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br </span><span style="color: #0000ff;"&gt;/></span><span style="color: #000000;"&gt;
            gender:{{p.gender}}</span><span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;br </span><span style="color: #0000ff;"&gt;/></span>
            <span style="color: #0000ff;"&gt;<</span><span style="color: #800000;"&gt;input </span><span style="color: #ff0000;"&gt;type</span><span style="color: #0000ff;"&gt;="text"</span><span style="color: #ff0000;"&gt; name</span><span style="color: #0000ff;"&gt;="name"</span><span style="color: #ff0000;"&gt; value</span><span style="color: #0000ff;"&gt;="{{p.name}}"</span><span style="color: #ff0000;"&gt; ng-model</span><span style="color: #0000ff;"&gt;="p.name"</span> <span style="color: #0000ff;"&gt;/>  <button>更改</button></span>
        <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;li</span><span style="color: #0000ff;"&gt;></span>
    <span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;ul</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"&gt;</</span><span style="color: #800000;"&gt;div</span><span style="color: #0000ff;"&gt;></span>

<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

注册单击事件,单击后得到文本框绑定的属性的新值:

更改

方法的实现,以及$http请求服务进行修改数据库

属性。

方法实现

更改

解决办法:直接将当前对象传到方法中或者传属性p.name。

解决方案,但是有个问题。

修改一个其他的也会跟着改变。

总结

属性的时候,最好还是将该对象或者该对象的值传到方法中。刚接触angularjs,不知道有没有更好的解决办法,这是在项目中遇到的一个问题,记录在此,希望你有个更好的解决方式,不妨留言,谢谢。

猜你在找的Angularjs相关文章